javascript - 用钢笔工具在画布上平滑地画一条线，而不必重画所有其他线

Question

有没有办法避免重绘画布上的所有元素（所以我不必跟踪所有内容），同时仍然对当前绘制的线条有流畅的绘图体验？

Answer 1

这是一个很好的问题，但措辞含糊。以后的措辞问题请多加注意。

通常在绘制平滑线时，您需要从头开始重新绘制线。

不过，您不需要从头开始重新绘制所有内容，因为您应该遵循以下操作：

1. 将当前画布保存到内存中的画布
2. 开始画一条新线
3. 当你画画时，你不断地：
   • 清理画布
   • 从内存画布绘制到主画布上
   • 画线 - 到目前为止
4. 当行结束时，将新画布保存到内存画布并重复此过程

您需要跟踪的唯一行（就点而言）是“当前”行。所有旧行都通过内存画布保存到位图中。

这是我很久以前做的一个例子，专门处理平滑线。代码组织很奇怪，因为我从别人的代码开始，但它应该给你基本的想法：

http://jsfiddle.net/NWBV4/10/

上面描述的绘图部分在mousemove中可以看到：

this.mousemove = function(ev) {
    if (tool.started) {
        context.clearRect(0, 0, 300, 300);
        // put back the saved content
        context.drawImage(memCanvas, 0, 0);
        tool.points.push({
            x: ev._x,
            y: ev._y
        });
        drawPoints(context, tool.points);
    }
};