当前位置： 首页 > news >正文

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

news 2025/10/13 18:10:52

目录

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

前言

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

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

相关文章：

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

目录 前言一、 效果展示二、 实现步骤0. 行动前的思考1. 为小地图更新「背景图」2. 为小地图更新「滑动窗口」2.1 获取新的滑动窗口「宽高」2.2 获取新的滑动窗口「位置」3. 为小地图更新「遮罩」后记前言 上一篇博文中，我们引入了「逻辑画布」的概念，让整个工具的页面看起来…...

编程日记 2024/5/26 16:58:55

linux的chmod的数字太难记了，用u, g, o, a更简单！

u, g, o, 和 a是用来设置或查看文件或目录权限在类Unix或Linux系统中的特殊字符，它们分别代表文件或目录的所有者(user)、所属组(group)、其他用户(others)和所有用户(all users)。 而权限方r和w是其中的两种，分别代表读权限（read&#xff0…...

编程日记 2024/5/26 16:56:53

牛客热题：有效括号

📟作者主页：慢热的陕西人 🌴专栏链接：力扣刷题日记 📣欢迎各位大佬👍点赞🔥关注🚓收藏，🍉留言 文章目录 牛客热题：有效括号题目链接方法一&#x…...

编程日记 2024/5/26 16:55:52

利用SQL语句实现多表联合查询——多表关系介绍

1.多对多查询 先创建一个student表和course表，应该利用外键来实现，通过一个中间表分别对应student和course中的id CREATE TABLE student (id INT unsigned PRIMARY KEY,name VARCHAR(255),no VARCHAR(50) ); CREATE TABLE course (id INT PRIMARY KEY,…...

编程日记 2024/5/26 16:52:49

Java中IO流类的体系

Java为我们提供了多种多样的IO流，我们可以根据不同的功能及性能要求挑选合适的IO流，如图所示，为Java中IO流类的体系。 从上图发现，很多流都是成对出现的，比如： FileInputStream/FileOutputStream&#xff0…...

编程日记 2024/5/26 16:48:46

【调试笔记-20240521-Linux-编译 QEMU/x86_64 可运行的 OpenWrt 固件】

调试笔记-系列文章目录 调试笔记-20240521-Linux-编译 QEMU/x86_64 可运行的 OpenWrt 固件 文章目录 调试笔记-系列文章目录调试笔记-20240521-Linux-编译 QEMU/x86_64 可运行的 OpenWrt 固件 前言一、调试环境操作系统：Ubuntu 22.04.4 LTS编译环境调试目标 二、调…...

编程日记 2024/5/26 16:45:43

GitLab的原理及应用详解（六）

本系列文章简介： 随着软件开发的不断进步和发展，版本控制系统成为了现代软件开发过程中不可或缺的一部分。而GitLab作为其中一种流行的版本控制工具，在软件开发领域享有广泛的应用。GitLab不仅提供了强大的版本控制功能，还集成了项…...

编程日记 2024/5/26 16:44:41

【调和级数】100321. 优质数对的总数 II

本文涉及知识点 调和级数 质数、最大公约数、菲蜀定理 LeetCode100321. 优质数对的总数 II 给你两个整数数组 nums1 和 nums2，长度分别为 n 和 m。同时给你一个正整数 k。 如果 nums1[i] 可以被 nums2[j] * k 整除，则称数对 (i, j) 为 优质数对&#…...

编程日记 2024/5/26 16:43:40

Java SE入门及基础（54） 函数式接口

目录 1. 什么是函数式接口 函数式接口 示例 示例 2. 函数式编程 示例 3. Lambda 表达式延迟执行 应用场景 示例 4. Consumer 接口 解释说明 示例 5. BiConsumer 接口 解释说明 示例 6. Predicate 接口 解释说明 示例 练习 7. Function 接口 解释说明 示例…...

编程日记 2024/5/26 16:42:39

轻松同步：将照片从三星手机传输到iPad的简便方法

概括 想要在新 iPad 上查看三星照片吗？但是，如果您不知道如何将照片从三星手机传输到 iPad，则无法在 iPad 上查看图片。为此，本文分享了 7 个有用的方法，以便您可以使用它们在不同操作系统之间轻松发送照片。现在&…...

编程日记 2024/5/26 16:41:38

MySQL查询某个字段含有字母数字的值

在MySQL中，要查询某个字段含有字母和数字的值，可以使用正则表达式配合REGEXP操作符。以下是一个详细的示例，说明如何编写这样的查询。 假设我们有一个名为my_table的表，其中有一个名为my_column的字段，我们想要查询这…...

编程日记 2024/5/26 16:40:37

通关！游戏设计之道Day14

力量与你同在 所有类型的游戏里，赛车类，解谜类，动作冒险类和射击类你都能找到强化道具。 强化道具 设计强化道具时，设计师应该开动脑筋琢磨下面几个问题 1.强化道具有什么用？ 2.他长什么样子，在整个游戏…...

编程日记 2024/5/26 16:39:36

实现一个自定义 hook，用于强制刷新当前组件

写在前面 在 react 中，如果 state 数据发生变化，我们知道，会重新渲染该组件。 但是这个前提是我们需要依赖 state 数据的变化，那比如我们并不想定义 state，又或者说我们的操作不能引起 state 的变化，此时…...

编程日记 2024/5/26 16:37:33

牛客热题：滑动窗口的最大值

📟作者主页：慢热的陕西人 🌴专栏链接：力扣刷题日记 📣欢迎各位大佬👍点赞🔥关注🚓收藏，🍉留言 文章目录 牛客热题：滑动窗口的最大值题目链接方法一…...

编程日记 2024/5/26 16:36:32

Adobe产品安装目录修改

进入安装包目录&#xff0c;进入到products文件夹 编辑driver.xml文件 将“InstallDir”修改为你需要安装的软件的目录&#xff0c;我这里是修改到D:\Adobe目录 <DriverInfo> <ProductInfo> xxxxxxxxxxxxxxxxx </ProductInfo> 拷贝RequestInfo这部分…...

编程日记 2024/5/26 16:35:31

时间（空间）复杂度（结构篇）

目录 前言&#xff1a; 一、时间复杂度 1.1 时间复杂度的定义 1.2 时间复杂度的分析 表示方法&#xff1a; 1.3 常见的时间复杂度 1.4 时间复杂度的计算以及简单的分析 冒泡排序 折半查找&#xff08;二分查找&#xff09; 斐波那契数列&#xff08;递归&#xff09…...

编程日记 2024/5/26 16:34:30

react记录部署

导语 React中的核心概念 1 虚拟DOM&#xff08;Virtual DOM&#xff09; 2 Diff算法&#xff08;虚拟DOM的加速器&#xff0c;提升React性能的法宝&#xff09; React主要的原理 Virtual DOM 虚拟DOM; 提供了一种不同的而又强大的方式来更新DOM&#xff0c; 代替直接的DOM操…...

编程日记 2024/5/26 16:32:28

【计算机毕业设计】基于SSM+Vue的校园美食交流系统【源码+lw+部署文档】

目录 前 言 第1章 概述 1.1 研究背景 1.2 研究目的 1.3 研究内容 第二章 开发技术介绍 2.1 Java技术 2.2 Mysql数据库 2.3 B/S结构 2.4 SSM框架 第三章 系统分析 3.1 可行性分析 3.1.1 技术可行性 3.1.2 经济可行性 3.1.3 操作可行性 3.2 系统性能分析 3.3 系…...

编程日记 2024/5/26 16:31:27

「YashanDB迁移体验官」Mysql生产环境迁移至YashanDB数据库深度体验

「YashanDB迁移体验官」Mysql生产环境迁移至YashanDB数据库深度体验 1. 前言1.1 产品介绍1.2 产品架构1.3 产品规格1.3.1 数据库版本支持1.3.2 数据类型支持 2. YMP安装2.1 环境说明2.2 执行安装2.3 访问YMP2.3.1 YMP登录界面2.3.2 YMP迁移流程 3. YMP数据迁移3.1 创建数据源3.…...

编程日记 2024/5/26 16:30:26

qmt量化交易策略小白学习笔记第4期【qmt如何获取获取行情数据--内置python使用方法】

内置python使用方法 qmt更加详细的教程方法&#xff0c;会持续慢慢梳理。 也可找寻博主的历史文章&#xff0c;搜索关键词查看解决方案 &#xff01; 感谢关注&#xff0c;需免费开通量化回测与咨询实盘权限&#xff0c;可以和博主联系&#xff01; 获取历史行情与实时行情…...

编程日记 2024/5/26 16:29:25

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周&#xff0c;有很多同学在写期末Java web作业时&#xff0c;运行tomcat出现乱码问题&#xff0c;经过多次解决与研究&#xff0c;我做了如下整理&#xff1a; 原因&#xff1a; IDEA本身编码与tomcat的编码与Windows编码不同导致&#xff0c;Windows 系统控制台…...

编程新知 2025/10/13 16:33:54

[特殊字符] 智能合约中的数据是如何在区块链中保持一致的？

&#x1f9e0; 智能合约中的数据是如何在区块链中保持一致的&#xff1f; 为什么所有区块链节点都能得出相同结果&#xff1f;合约调用这么复杂&#xff0c;状态真能保持一致吗&#xff1f;本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里&#xf…...

编程新知 2025/7/12 23:55:04

R语言AI模型部署方案：精准离线运行详解

R语言AI模型部署方案：精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案，实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点： 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...

编程新知 2025/9/28 0:44:00

MFC内存泄露

1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...

编程新知 2025/10/11 14:44:32

iPhone密码忘记了办？iPhoneUnlocker，iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版​分享

平时用 iPhone 的时候&#xff0c;难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵&#xff0c;或者买了二手 iPhone 却被原来的 iCloud 账号锁住&#xff0c;这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...

编程新知 2025/10/11 19:08:26

UE5 学习系列（三）创建和移动物体

这篇博客是该系列的第三篇&#xff0c;是在之前两篇博客的基础上展开&#xff0c;主要介绍如何在操作界面中创建和拖动物体&#xff0c;这篇博客跟随的视频链接如下&#xff1a; B 站视频&#xff1a;s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...

编程新知 2025/10/12 5:46:53

【磁盘】每天掌握一个Linux命令 - iostat

目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat&#xff08;I/O Statistics&#xff09;是Linux系统下用于监视系统输入输出设备和CPU使…...

编程新知 2025/9/30 16:39:11

将对透视变换后的图像使用Otsu进行阈值化，来分离黑色和白色像素。这句话中的Otsu是什么意思？

Otsu 是一种自动阈值化方法&#xff0c;用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理&#xff0c;能够自动确定一个阈值&#xff0c;将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...

编程新知 2025/10/11 3:56:08

屋顶变身“发电站” ，中天合创屋面分布式光伏发电项目顺利并网！

5月28日&#xff0c;中天合创屋面分布式光伏发电项目顺利并网发电&#xff0c;该项目位于内蒙古自治区鄂尔多斯市乌审旗&#xff0c;项目利用中天合创聚乙烯、聚丙烯仓库屋面作为场地建设光伏电站&#xff0c;总装机容量为9.96MWp。 项目投运后&#xff0c;每年可节约标煤3670…...

编程新知 2025/10/10 19:21:04

GitHub 趋势日报 (2025年06月08日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...

编程新知 2025/10/8 5:48:25