前端canvas项目实战——在线图文编辑器(十)：小地图MiniMap(上)
目录
- 前言
- 一、 效果展示
- 二、 实现步骤
- 0. 行动前的思考
- 1. 为小地图更新「背景图」
- 2. 为小地图更新「滑动窗口」
- 2.1 获取新的滑动窗口「宽高」
- 2.2 获取新的滑动窗口「位置」
- 3. 为小地图更新「遮罩」
- 后记
前言
上一篇博文中，我们引入了「逻辑画布」的概念，让整个工具的页面看起来 “专业” 了很多。这也为后续的很多实用的功能打下了基础，例如本篇博文要讲到的小地图MiniMap。
如果你使用过市面上的一些图文编辑器，或者玩过一些游戏，就很容易理解「小地图」的作用。我们在屏幕中能看到的部分——前文中已经介绍过——叫做「视口」，视口之外的部分都看不到。小地图的作用是将全局视图按一定比例缩小，让我们能大体上总览全