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

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

news 2026/2/8 23:02:09

目录

  • 前言
  • 一、 效果展示
  • 二、 实现步骤
    • 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

循环冗余码校验CRC码 算法步骤+详细实例计算

通信过程&#xff1a;&#xff08;白话解释&#xff09; 我们将原始待发送的消息称为 M M M&#xff0c;依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)&#xff08;意思就是 G &#xff08; x ) G&#xff08;x) G&#xff08;x) 是已知的&#xff09;&#xff0…...

编程新知 2026/2/8 8:16:14

Docker 运行 Kafka 带 SASL 认证教程

Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明&#xff1a;server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...

编程新知 2026/1/23 4:15:03

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/12/13 1:32:15

python执行测试用例，allure报乱码且未成功生成报告

allure执行测试用例时显示乱码&#xff1a;‘allure’ &#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd;ڲ&#xfffd;&#xfffd;&#xfffd;&#xfffd;ⲿ&#xfffd;&#xfffd;&#xfffd;Ҳ&#xfffd;&#xfffd;&#xfffd;ǿ&#xfffd;&am…...

编程新知 2026/2/7 4:21:44

Hive 存储格式深度解析：从 TextFile 到 ORC，如何选对数据存储方案？

在大数据处理领域&#xff0c;Hive 作为 Hadoop 生态中重要的数据仓库工具&#xff0c;其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式&#xff0c;很多开发者常常陷入选择困境。本文将从底…...

编程新知 2025/12/6 10:54:35

【Go语言基础【13】】函数、闭包、方法

文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数&#xff08;函数作为参数、返回值&#xff09; 三、匿名函数与闭包1. 匿名函数&#xff08;Lambda函…...

编程新知 2025/12/8 19:02:25

【VLNs篇】07：NavRL—在动态环境中学习安全飞行

项目内容论文标题NavRL: 在动态环境中学习安全飞行 (NavRL: Learning Safe Flight in Dynamic Environments)核心问题解决无人机在包含静态和动态障碍物的复杂环境中进行安全、高效自主导航的挑战&#xff0c;克服传统方法和现有强化学习方法的局限性。核心算法基于近端策略优化…...

编程新知 2026/2/7 4:16:41

C#中的CLR属性、依赖属性与附加属性

CLR属性的主要特征 封装性&#xff1a; 隐藏字段的实现细节 提供对字段的受控访问 访问控制&#xff1a; 可单独设置get/set访问器的可见性 可创建只读或只写属性 计算属性&#xff1a; 可以在getter中执行计算逻辑 不需要直接对应一个字段 验证逻辑&#xff1a; 可以…...

编程新知 2025/12/4 0:13:33

FFmpeg：Windows系统小白安装及其使用

一、安装 1.访问官网 Download FFmpeg 2.点击版本目录 3.选择版本点击安装 注意这里选择的是【release buids】&#xff0c;注意左上角标题 例如我安装在目录 F:\FFmpeg 4.解压 5.添加环境变量 把你解压后的bin目录&#xff08;即exe所在文件夹&#xff09;加入系统变量…...

编程新知 2026/1/31 14:34:46

GraphRAG优化新思路-开源的ROGRAG框架

目前的如微软开源的GraphRAG的工作流程都较为复杂&#xff0c;难以孤立地评估各个组件的贡献&#xff0c;传统的检索方法在处理复杂推理任务时可能不够有效&#xff0c;特别是在需要理解实体间关系或多跳知识的情况下。先说结论&#xff0c;看完后感觉这个框架性能上不会比Grap…...

编程新知 2026/2/7 14:13:17