前端canvas项目实战——在线图文编辑器(十):小地图MiniMap(上)

目录

  • 前言
  • 一、 效果展示
  • 二、 实现步骤
    • 0. 行动前的思考
    • 1. 为小地图更新「背景图」
    • 2. 为小地图更新「滑动窗口」
      • 2.1 获取新的滑动窗口「宽高」
      • 2.2 获取新的滑动窗口「位置」
    • 3. 为小地图更新「遮罩」
  • 后记

前言

上一篇博文中,我们引入了「逻辑画布」的概念,让整个工具的页面看起来 “专业” 了很多。这也为后续的很多实用的功能打下了基础,例如本篇博文要讲到的小地图MiniMap

如果你使用过市面上的一些图文编辑器,或者玩过一些游戏,就很容易理解「小地图」的作用。我们在屏幕中能看到的部分——前文中已经介绍过——叫做「视口」,视口之外的部分都看不到。小地图的作用是将全局视图按一定比例缩小,让我们能大体上总览全

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/13981.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JPA 3万字面试宝典

目录 什么是JPA? JPA和Hibernate有什么区别? 什么是ORM(对象关系映射)? 什么是Entity?

【机器学习】在电子商务(淘*拼*京*—>抖)的应用分析

机器学习与大模型:电子商务的新引擎 一、电子商务的变革与挑战二、机器学习与大模型的崛起三、机器学习与大模型在电子商务中的应用实践个性化推荐精准营销智能客服库存管理与商品定价 四、总结与展望 随着互联网的飞速发展,电子商务已经成为我们生活中不…

NDIS小端口驱动(四)

NDIS中断相关 1. 注册和取消注册中断: 微型端口驱动程序调用 NdisMRegisterInterruptEx 来注册中断。 驱动程序分配并初始化 NDIS_MINIPORT_INTERRUPT_CHARACTERISTICS 结构,以指定中断特征和函数入口点,驱动程序将结构传递给 NdisMRegister…

【三剑客和正则表达式】

文章目录 学习目标一、什么是三剑客1.三剑客grep2.三剑客sed3.三剑客awk4.正则过滤例子15.正则过滤例子2 总结 学习目标 1.学会使用 grep 2.学会使用 sed 3.学会使用 awk 4.学会使用正则表达式一、什么是三剑客 正则三剑客:grep sed awk 1.三剑客grep # 擅长过滤…

【MySQL精通之路】查询优化器的使用(8)

MySQL通过影响查询计划评估方式的系统变量、可切换优化、优化器和索引提示以及优化器成本模型提供优化器控制。 服务器在column_statistics数据字典表中维护有关列值的直方图统计信息(请参阅第10.9.6节“Optimizer统计信息”)。与其他数据字典表一样&am…

#Ethereum 现货ETF 问题汇总 转

专题: #Ethereum 现货ETF 问题汇总,包括了多数小伙伴们的疑问,有任何忽略请留言给我,我会补充。 1. #ETH 现货ETF何时公布? 一般来说会在北京时间的5月24日凌晨2点至4点之间,不排除稍微延后到凌晨6点的可能…

基于大语言模型的应用

在AI领域,大语言模型已成为备受瞩目的焦点,尤其在自然语言处理(NLP)领域,其应用愈发广泛。BLM作为一种多任务语言建模方法,旨在构建一个具备多功能的强大模型。在给定文本和查询条件下,该模型能…

【深度学习】YOLOv8训练,交通灯目标检测

文章目录 一、数据处理二、环境三、训练 一、数据处理 import traceback import xml.etree.ElementTree as ET import os import shutil import random import cv2 import numpy as np from tqdm import tqdmdef convert_annotation_to_list(xml_filepath, size_width, size_he…

海山数据库(He3DB)代理ProxySQL使用详解:(二)功能实测

读写分离实测 ProxySQL官方demo演示了三种读写分离的方式:使用不同的端口进行读写分离、使用正则表达式进行通用的读写分离、使用正则和digest进行更智能的读写分离。最后一种是针对特定业务进行的优化调整,也可将其归结为第二种方式,下边分…

MySQL备份与日志练习

1、创建对mysql数据库test1的定时备份任务,频率是每周一的2点 create database test1;crond -e0 2 * * 1 mysqldump -u root -pAdmin123 --databases test1 > /opt/test1.sql2、test1中有t1、t2、t3三张表,要求只备份t2这张表 mysqldump -u root -pA…

Python 机器学习 基础 之 数据表示与特征工程 【单变量非线性变换 / 自动化特征选择/利用专家知识】的简单说明

Python 机器学习 基础 之 数据表示与特征工程 【单变量非线性变换 / 自动化特征选择/利用专家知识】的简单说明 目录 Python 机器学习 基础 之 数据表示与特征工程 【单变量非线性变换 / 自动化特征选择/利用专家知识】的简单说明 一、简单介绍 二、单变量非线性变换 三、自…

知识图谱数据预处理笔记

知识图谱数据预处理笔记 0. 引言1. 笔记1-1. \的转义1-2. 特殊符号的清理1-3. 检查结尾是否正常1-4. 检查<>是否存在1-5. 两端空格的清理1-6. 检查object内容长时是否以<开始 0. 引言 最近学习知识图谱&#xff0c;发现数据有很多问题&#xff0c;这篇笔记记录遇到的…

软件设计师备考笔记(九):数据库技术基础

文章目录 一、基本概念二、数据模型&#xff08;一&#xff09;基本概念&#xff08;二&#xff09;E-R模型&#xff08;三&#xff09;数据模型 三、关系代数&#xff08;一&#xff09;关系数据库的基本概念&#xff08;二&#xff09;五种基本的关系代数运算&#xff08;三&…

React hooks - forwardRef+useImperativeHandle

forwardRefuseImperativeHandle React.forwardRef用法useImperativeHandle用法第三个参数的用法 React.forwardRef与useImperativeHandle配合使用注意事项 React.forwardRef用法 1.创建一个 能够接受到ref属性的React 组件。 ref 用来获取实例&#xff0c;但函数组件不存在实例…

bugku 网络安全事件应急响应

开启靶场&#xff1a; 开始实验&#xff1a; 使用Xshell登录服务器&#xff0c;账号及密码如上图。 1、提交攻击者的IP地址 WP: 找到服务器日志路径&#xff0c;通常是在/var/log/&#xff0c;使用cd /var/log/&#xff0c;ls查看此路径下的文件. 找到nginx文件夹。 进入ng…

hyperopt、optuna、gridsearch、randomsearch自动调参

开始使⽤hyperopt进⾏⾃动调参 algo partial(tpe.suggest, n_startup_jobs1) best fmin(lightgbm_factory, space, algoalgo, max_evals20, pass_expr_memo_ctrlNone) RMSE lightgbm_factory(best) print(‘best :’, best) print(‘best param after transform :’) argsD…

【Jenkins】Centos7安装Jenkins(环境:JDK11,tomcat9,maven3.8)

目录 Jenkins部署环境Maven安装1.上传安装包2.解压3.配置Maven环境变量4.使配置文件立即生效5.校验Maven安装6.Maven配置阿里云仓库7.Maven配置依赖下载位置 Git安装安装监测安装 JDK17安装1.查看旧版本JDK2.卸载旧版本JDK3.查看是否卸载干净4.创建java目录5.下载JDK11安装包6.…

“开源与闭源大模型:数据隐私、商业应用与社区参与的多维比较“

开源大模型和闭源大模型各有其优势和局限&#xff0c;它们在数据隐私、商业应用和社区参与方面的表现也各有不同。以下是对这三个方面进行的分析&#xff1a; 方向一&#xff1a;数据隐私 开源大模型&#xff1a; 优点&#xff1a;开源模型通常允许用户和开发者查看和修改代…

Excel中Lookup函数

#Excel查找函数最常用的是Vlookup&#xff0c;而且是经常用其精确查找。Lookup函数的强大之处在于其“二分法”的原理。 LOOKUP&#xff08;查找值&#xff0c;查找区域&#xff08;Vector/Array&#xff09;&#xff0c;[返回结果区域]&#xff09; 为什么查找区域必须升序/…

一种处理checked exception的方法

一种处理checked exception的方法 在网上看到的一种处理异常的方法 public abstract class Try<V> {private Try() {}public abstract Boolean isSuccess();public abstract Boolean isFailure();public abstract void throwException();public abstract Throwable getMe…