HTML5 画布擦除绘制的对象

HTML5 Canvas erasing a drawn object?

本文关键字：绘制 对象 擦除 布擦除 HTML5      更新时间：2023-09-26

我在为绘制的对象实现"擦除"功能时遇到问题。我画这样的对象：

function draw_obj1(context) {
    context.lineTo(...)
    context.arc(...)
    //etc
}

这些是绘制在我为画布准备的图像背景之上的（通过context.createPattern，fillStyle = pattern等）。

所以说上面的函数使用各种 lineTo 调用来描绘一个三角形。现在为了"擦除"或"撤消"这张图，我的一个计划是在其上重新绘制同一对象的"xor"版本，以撤消它。我通过context.globalCompositeOperation（见：https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html）来做到这一点。

这几乎有效，除了最终结果在我的浅蓝色背景下不是完全空白的。它显示为浅灰色三角形，而不是原始的黑色线条三角形。

编辑 - 忘了提到我尝试过的另一个想法。在我需要消失的区域上做"clearRect"在我的浅蓝色背景上会有一个白洞，这不好。

那么我应该如何撤消我绘制的线条/弧线呢？

干杯

仅使用您的 Canvas 内容无法做到这一点。画布元素的反应就像一个真正的画布：由于绘制了东西，它们被合并并绑定到整个画面。

这是因为画布在大多数图形 API 中只是一个字节数组。计算机无法单独知道如何识别和区分构成当前帧的对象。

最好的方法是实现类似"场景图"的东西，即图树。然后，您可以将对象附加到此图形树中，并构建自己的算法，以便在画布上绘制每个对象。

您可以有一个历史数据结构，以允许撤消/重做从场景图中追加/删除对象，并在一个小时间片（纳毫秒）内重绘每个对象。

这是对你的问题的整体看法。希望您知道如何以编程方式处理图形。

更多关于这里： 如何向HTML5 Canvas添加撤消功能？

在这里：http://www.abidibo.net/blog/2011/10/12/development-undo-and-redo-functionality-canvas/

你应该做一个"绘制队列"。也就是说，将画布上完成的操作序列放入数组中。这种方法的好处是，你所做的每一个动作都会在一个数组中被跟踪。不利的一面是必须重新绘制整个画布以适应更改。

画布动画框架大部分时间都在执行这些操作。

一个简单的表示是这样的：

var drawingQueue = [
    {
        shape : 'rectangle',
        fill : 'red'
    },
    {
        shape : 'circle',
        fill : 'blue'
    },
    {
        shape : 'arc',
        fill : 'green'
    }
];

drawingQueue是命令的命令/属性数组，用于指示在画布中绘制的内容。在此示例中，此队列将绘制一个红色矩形、蓝色圆圈和绿色弧线。

例如，假设我想删除圆圈，我只是将其从数组中删除并重新绘制队列中的所有内容 - 现在没有圆圈。假设我们执行撤消操作，我们将使用数组pop()删除最后一项，然后重新绘制画布 - 现在没有弧线。

但是为了更快地开发，我建议改用框架。他们将为您的形状提供内部跟踪系统，以便于在画布中添加和删除"元素"。首选是KineticJS和FabricJS。

prev_comp = context.globalCompositeOperation
context.globalCompositeOperation = 'destination-out'
context.strokeStyle = "rgba(255, 255, 255, 1)"
/* Draw some "eraser" lines/shapes ..*/
context.globalCompositeOperation = prev_comp
相关文章：