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

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

news 2026/2/9 2:54:39

目录

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

RestClient

什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端&#xff0c;它允许HTTP与Elasticsearch 集群通信&#xff0c;而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级&#xff…...

编程新知 2025/11/30 15:33:36

XCTF-web-easyupload

试了试php&#xff0c;php7&#xff0c;pht&#xff0c;phtml等&#xff0c;都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接&#xff0c;得到flag...

编程新知 2026/2/8 3:54:15

C++实现分布式网络通信框架RPC(3)--rpc调用端

目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中&#xff0c;我们已经大致实现了rpc服务端的各项功能代…...

编程新知 2026/2/8 20:42:58

python打卡day49

知识点回顾&#xff1a; 通道注意力模块复习空间注意力模块CBAM的定义 作业&#xff1a;尝试对今天的模型检查参数数目&#xff0c;并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...

编程新知 2026/2/7 5:37:17

从WWDC看苹果产品发展的规律

WWDC 是苹果公司一年一度面向全球开发者的盛会&#xff0c;其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具&#xff0c;对过去十年 WWDC 主题演讲内容进行了系统化分析&#xff0c;形成了这份…...

编程新知 2026/2/2 21:52:33

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

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

编程新知 2026/1/24 10:00:31

学校招生小程序源码介绍

基于ThinkPHPFastAdminUniApp开发的学校招生小程序源码&#xff0c;专为学校招生场景量身打造&#xff0c;功能实用且操作便捷。 从技术架构来看&#xff0c;ThinkPHP提供稳定可靠的后台服务&#xff0c;FastAdmin加速开发流程&#xff0c;UniApp则保障小程序在多端有良好的兼…...

编程新知 2026/1/26 14:19:52

spring：实例工厂方法获取bean

spring处理使用静态工厂方法获取bean实例&#xff0c;也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下&#xff1a; 定义实例工厂类&#xff08;Java代码&#xff09;&#xff0c;定义实例工厂&#xff08;xml&#xff09;&#xff0c;定义调用实例工厂&#xff…...

编程新知 2025/11/25 22:46:30

【配置 YOLOX 用于按目录分类的图片数据集】

现在的图标点选越来越多&#xff0c;如何一步解决&#xff0c;采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集&#xff08;每个目录代表一个类别&#xff0c;目录下是该类别的所有图片&#xff09;&#xff0c;你需要进行以下配置步骤&#x…...

编程新知 2026/1/30 4:52:56

css3笔记 （1） 自用

outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size&#xff1a;0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格&#xff…...

编程新知 2025/10/11 5:18:43