一个基于Canvas的标注工具的开发历史

多年以前，我就想给”林羽凡markdown编辑器“增加一个标注功能，但一直没实现好。

上图是旧版本编辑器中的标注功能

 

虽然我本地有在使用，但总感觉不好用。于是又重新开发了一个可以支持自由拖拽的标注工具。

 

最开始让Ai生成了一个基础样式：

 

这个工具的原理也比较好理解：在开启标注后，生成一个指定宽高和位置的透明Canvas，这个Canvas需要覆盖在各种编辑器上，每个编辑器的位置不同，大小也不同（也可能全屏了），然后在Canvas上绘制各种图案（包括文字）。

Ai生成的首版不好看，也不好用。Canvas定位问题直没有解决，要么是z-index问题导致画不了，或者画了看不到，或者画的东西有变形，总之是问题很，于是换了Ai工具接着调试。

后面调整了Ui界面，看着稍微舒服了一些。

将颜色选择器做成下拉框，节省工具展开的位置。

全屏状态下的画布也做了测试。

马赛克的功能虽然有了，但还是不我满意的效果。

目前的马赛克只支持将指定颜色（颜色下拉框中的颜色）降低明度，找到8个相近的颜色，再生成随机块来模拟马赛克效果。

我希望是在框选一个范围后，通过获取”我看到的“屏幕上的元素的颜色，获取8种相近的颜色，再生成随机色块。但这个难度就是如何获取屏幕上”我看到的“区域内的颜色。

核心思路是在我框选出范围后，程序通过截图把这个框选出的区域放在临时Canvas上，再计算这个canvas中的颜色值。

我试过很多第三方的库，都实现得不好，问题挺多。让Ai写原生的，实现得也不好，要么颜色识别不出来，要么识别出的颜色数量不对（和获取到的对应区域内的dom元素有关系）。

程序并不会”看“到我们看到的页面，我们看到的页面其实是浏览器基于css和js按照一定的规则”画“出来的，或者说是通过事件渲染出来的。我们看到的页面是一个”整体“，或者看到的就是一个平面（通过不同层级和投影）在视觉上看起来是立体的。

后面还得想办法优化这个马赛克功能。

我理想中的马赛克是上图中的样子。只获取我”看“得到的元素的颜色，并随机生成色块。