这是一个系列博客，最终目的是要做一个基于HTMLCanvas的、类似于微软Office的WebOffice套件（包括：文档、表格、幻灯片……等等）。博客园：《从零开始,开发一个WebOffice套件》系列博客目录富文本编辑器Githubrepo地址：https://github.com/zhaokang555/canvas-text-editor富文本编辑器在线Demo：https://zhaokang555.github.io/canvas-text-editor/2.富文本编辑器（MVP）2.29Feature：拖动控制点，调整编辑器大小2.29.1算法监听控制点的拖动事件，将拖动的距离记

需求是这样的：在页面的预览图上面绘制一个矩形，画完立即保存，右上角出现一个删除按钮，要立即可以删除。一开始的思路是使用canvas去实现，把一个透明的画布放在预览图上，滚动的时候，红框就会随着这个画布滚动。那么用一个透明的canvasabsolute在画布上是行不通的。然后我就在想那生成一个canvas的高度是整个预览图的长度吧。但是思考了下，我们的场景预览图可能会有几百几千张，那么生成一个这么长的canvas好像也有点不太好。并且生成了canvas，虽然也可以绘制一个删除按钮，实现点击，但也无法实现底层预览图上面红框悬浮效果了。怎么想这里使用canvas去绘制矩形框都是一个又复杂性能又差的方

需求是这样的：在页面的预览图上面绘制一个矩形，画完立即保存，右上角出现一个删除按钮，要立即可以删除。一开始的思路是使用canvas去实现，把一个透明的画布放在预览图上，滚动的时候，红框就会随着这个画布滚动。那么用一个透明的canvasabsolute在画布上是行不通的。然后我就在想那生成一个canvas的高度是整个预览图的长度吧。但是思考了下，我们的场景预览图可能会有几百几千张，那么生成一个这么长的canvas好像也有点不太好。并且生成了canvas，虽然也可以绘制一个删除按钮，实现点击，但也无法实现底层预览图上面红框悬浮效果了。怎么想这里使用canvas去绘制矩形框都是一个又复杂性能又差的方