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

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

news 2026/5/26 17:26:25

目录

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

Unity UGUI轻量UI框架：200行代码实现零GC界面管理

1. 为什么还要自己手写UI框架&#xff1f;——当UGUI原生方案开始“卡脖子”很多人看到这个标题第一反应是&#xff1a;“都2024年了&#xff0c;还手写UI框架&#xff1f;Asset Store里几十个成熟方案&#xff0c;NGUI、FairyGUI、TextMeshPro配套的UI系统一抓一大把&#xff…...

编程新知 2026/5/26 4:16:13

机器学习结合基因无关通路映射：从临床数据挖掘新药靶点

1. 项目概述&#xff1a;当机器学习遇见代谢通路&#xff0c;如何从数据中“挖”出新药靶点&#xff1f;在生物医学研究的前沿&#xff0c;我们正面临一个核心矛盾&#xff1a;一方面&#xff0c;我们拥有海量的临床数据&#xff0c;比如血糖、血压、BMI等指标&#xff1b;另一…...

编程新知 2026/5/26 3:22:05

BLE四大广播模式详解：可连接/不可连接/定向/周期广播

一、前言在低功耗蓝牙&#xff08;BLE&#xff09;开发中&#xff0c;广播&#xff08;Advertising&#xff09;是设备发现、连接建立、数据广播、设备重连的核心基石&#xff0c;所有BLE交互流程均始于广播报文的收发。不同于传统经典蓝牙&#xff0c;BLE所有广播行为标准化、…...

编程新知 2026/5/26 2:09:15

孤舟笔记 互联网常用框架篇二 Dubbo服务请求失败怎么处理？集群容错策略你用过几种

文章目录先说结论Failover&#xff1a;换家店试试Failfast&#xff1a;不行就算了Failsafe&#xff1a;忘了这事Failback&#xff1a;回头再说Forking&#xff1a;同时点几家Broadcast&#xff1a;通知所有人怎么选择回答技巧与点评加分回答面试官点评个人网站分布式系统中&…...

编程新知 2026/5/25 23:41:42

从游戏引擎到仿真平台：手把手教你用AirSim+UE4搭建你的第一个无人机/自动驾驶仿真环境

从游戏引擎到仿真平台&#xff1a;构建AirSimUE4无人机与自动驾驶仿真环境实战指南当游戏引擎遇上机器人算法测试&#xff0c;会碰撞出怎样的火花&#xff1f;微软开源的AirSim项目将虚幻引擎&#xff08;Unreal Engine&#xff09;从游戏开发领域引入到自动驾驶和无人机研究的…...

编程新知 2026/5/25 23:16:52

武汉国电华美16875kVA串联谐振试验装置，这手活儿细

在超高压变电站和长距离电缆的现场&#xff0c;交流耐压试验是检验设备绝缘的“最后一关”。这位老师傅经手过不少大工程&#xff0c;他说&#xff0c;面对GIS、大型变压器这些“大块头”电容性试品&#xff0c;能不能顺利“过关”&#xff0c;往往就看串联谐振装置顶不顶得住。…...

编程新知 2026/5/25 22:06:17

基于Max78000与规则引导的音频数据集构建：边缘AI声音识别实战

1. 项目概述&#xff1a;当边缘AI遇见棕榈树里的“窃听者”在边缘计算和物联网设备大行其道的今天&#xff0c;我们常常面临一个核心矛盾&#xff1a;一方面&#xff0c;我们希望设备足够“聪明”&#xff0c;能实时识别并响应特定的声音模式&#xff0c;比如工厂里高压阀门的异…...

编程新知 2026/5/25 20:01:35

Autodesk Fusion 360在Linux上的技术实现与性能优化深度解析

Autodesk Fusion 360在Linux上的技术实现与性能优化深度解析 【免费下载链接】Autodesk-Fusion-360-for-Linux This is a project, where I give you a way to use Autodesk Fusion 360 on Linux! 项目地址: https://gitcode.com/gh_mirrors/au/Autodesk-Fusion-360-for-Linu…...

编程新知 2026/5/25 18:12:25

从《吃豆人》到开放世界：聊聊Unity Navigation里Agent Radius和Cost的那些‘潜规则’

从《吃豆人》到开放世界&#xff1a;Unity Navigation中Agent Radius与Cost的隐藏逻辑1980年诞生的《吃豆人》用简单的迷宫路径定义了早期游戏AI的移动规则——幽灵们沿着固定路线巡逻&#xff0c;遇到转角时随机选择方向。这种设计在当时堪称革命性&#xff0c;但以今天的标准…...

编程新知 2026/5/25 16:59:09

CANN runtime：昇腾NPU 运行时的职责边界

个人主页&#xff1a;ujainu 文章目录前言为什么需要运行时这一层runtime管什么&#xff0c;不管什么Stream&#xff1a;并行的基本调度单位Event&#xff1a;跨Stream的同步锚点内存池化&#xff1a;少一次malloc就少一次卡顿任务队列&#xff1a;从计算图到硬件指令的最后一跳…...

编程新知 2026/5/25 16:04:32