Drawing/Moving/Deleting 笔触 HTML5 Canvas

Question

我正在使用 HTML5 Cordova 开发绘图应用程序。

我需要在 HTML5 Canvas.

上实现绘图、移动笔划、删除墨迹笔划

我正在探索实现以下目标的最佳方法：

1) 画一笔 2) Select 一笔并移动它 3）Select一笔，删掉

它会类似于这样： https://software.intel.com/en-us/html5/articles/touch-drawing-app-using-html5-canvas

但是我需要 select/move/delete 上面库不支持的笔画。

任何 pointers/samples 将不胜感激。

提前致谢。

Answer 1

HTML5 canvas 在现实生活中就像 canvas 一样工作。当你在一张纸上画一条线时，之后改变它的唯一方法是用橡皮擦擦掉它（也可能会损坏那里画的其他东西）或者在它上面画一些东西来覆盖它。当你在 HTML5 canvas 上画东西时，它不再是一个对象，而是变成了 canvas 上的一堆像素。你只能在之后通过透支来操作它。

当你想让用户修改他们之前画的笔画时，你需要将用户所做的所有笔画保存到一个数组中。当用户对笔画进行更改时，您需要从头开始擦除并重新绘制整个canvas。

当您处理大量用户可以自由移动的几何对象时，您也可以考虑使用 SVG 作为替代方案。在 SVG 中，每个图像元素都是一个对象，您可以在将其放入 SVG 文档后对其进行操作。