石沉溪洞

这个专栏，我将带领大家从入门HTML5中的Canvas，到最终实现一个精美的在线图文编辑器。我的初心没有变，就像几年以前，我在自己苦苦摸索实现之后，写下一篇篇博文，想要让初学者们在学习Java Web的道路上少走一些弯路一样。

上一篇博文中，我们列举了小地图MiniMap，其4个核心方法中的3个。由于篇幅所限，在这篇博文中继续介绍剩余的内容。这篇博文是《前端canvas项目实战——在线图文编辑器》付费专栏系列博文的第十一篇——小地图MiniMap(下)，主要的内容有：1. 实现用鼠标拖动滑动窗口，画布中的视口随之改变。2. 将4部分的核心代码组合起来，实现小地图的整个「生命周期」。

上一篇博文中，我们引入了「逻辑画布」的概念，让整个工具的页面看起来“专业”了很多。这也为后续的很多实用的功能打下了基础，例如本篇博文要讲到的小地图MiniMap。这篇博文是《前端canvas项目实战——在线图文编辑器》付费专栏系列博文的第十篇——小地图MiniMap(上)，主要的内容有：1. 小地图的作用及实现前的设计。2. 实现为小地图添加背景图、滑动窗口和遮罩。

上一篇博文中，我们实现了一组通用的功能按钮：复制、删除、锁定和层叠顺序。这篇博文是《前端canvas项目实战——在线图文编辑器》付费专栏系列博文的第九篇——逻辑画布，主要的内容有：1. 调整页面布局，将画布区域扩展至整个屏幕的剩余空间中。2. 区分「物理画布」和「逻辑画布」，为实现「缩放」、「辅助线」等功能打基础。

上一篇博文中，我们细致的讲解了实现文字的加粗、斜体、下划线、删除线这些功能时，遇到的Bug以及优化点。这篇博文是《前端canvas项目实战——在线图文编辑器》付费专栏系列博文的第八篇——复制、删除、锁定、层叠顺序，主要的内容有：1. 实现一组通用的功能按钮：复制、删除、锁定和层叠顺序

上一篇博文中，我们实现了为文字添加和修改加粗、斜体、下划线、删除线。这篇博文是《前端canvas项目实战——简历制作网站》付费专栏系列博文的第七篇——加粗、斜体、下划线、删除线（下），主要的内容有：1. 在上一篇实现加粗、斜体、下划线和删除线等功能时遇到bug及其解决方案。2. 在上一篇的实现中，我们发现了可以对数据进行优化的地方，降低数据存储和前后端传输的数据大小，减少浪费。

上一篇博文中，我们实现了对文字的字体、字号和行间距的编辑。这篇博文是《前端canvas项目实战——简历制作网站》付费专栏系列博文的第六篇——加粗、斜体、下划线、删除线，主要的内容有：1. 针对文本框（fabric.Textbox）对象： 扩充属性列表，使用户可以为画布中选中的文本框设置加粗、斜体、下划线和删除线。

上一篇博文中，我们扩充了线条对象（fabric.Line）的属性列表，使用户可以为画布中选中的线条增加或修改端点样式（多种剪头、圆形、菱形等）。这篇博文是《前端canvas项目实战——简历制作网站》付费专栏系列博文的第五篇——右侧属性栏(字体、字号、行间距)，主要的内容有：1. 针对文本框（fabric.Textbox）对象：扩充属性列表，使用户可以修改画布中选中的文本框的字体、字号和行间距。2. 在实现了整体更新文本框属性的基础上，还实现了仅更新用户选中的部分文字的样式。

上一篇博文中，我们扩充了线条对象（fabric.Line）的属性列表，使用户可以修改画布中选中的线条的宽度和样式（实线、虚线、点线等）。这篇博文是《前端canvas项目实战——简历制作网站》付费专栏系列博文的第四篇——右侧属性栏(线条端点样式)，主要的内容有：1. 针对线条对象：扩充属性列表，使用户可以为画布中选中的线条增加或修改端点样式。

上一篇博文中，我们初步实现了右侧属性栏，通过属性栏，我们可以便捷得修改画布中对象的颜色相关属性。这篇博文是《前端canvas项目实战——简历制作网站》付费专栏系列博文的第三篇——右侧属性栏(线条宽度&样式)，主要的内容有：1. 针对线条对象：扩充属性列表，使用户可以修改画布中选中的线条的宽度和样式（实线、虚线、点线等）

上一篇博文中，我们实现了`左侧工具栏`，通过点击工具栏，我们可以自由得在画布中添加想要的对象。这篇博文是《前端canvas项目实战——简历制作网站》付费专栏系列博文的第二篇——右侧属性栏(颜色)，主要的内容有：1. 初步实现右侧属性栏，使用户可以修改画布中选中的对象的**边框**和**填充**颜色。

在fabric基础系列博文中，我们通过代码向画布canvas中添加矩形、圆形等对象。这篇博文是《前端canvas项目实战——简历制作网站》付费专栏系列博文的第一篇——左侧工具栏，主要的内容有：1. 实现工具栏，使用户可以通过点击鼠标在画布中添加想要的对象。