在HTML5画布上绘制/移动/删除笔划

Drawing/Moving/Deleting strokes on HTML5 Canvas

本文关键字：移动 删除 绘制 HTML5      更新时间：2023-09-26

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

我需要在HTML5画布上实现绘图、移动笔划、删除墨迹笔划。

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

1） 绘制笔划2） 选择笔划并移动它3） 选择一个笔划并将其删除。

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

但我需要选择/移动/删除以上库中不支持的笔划。

任何指针/样本都将不胜感激。

提前谢谢。

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

如果希望用户修改之前绘制的笔划，则需要将用户绘制的所有笔划保存到数组中。当用户对笔划进行更改时，需要从头开始擦除并重新绘制整个画布。

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

相关文章：