在画布上用钢笔工具画一条线，而不必重绘所有其他线条 [英] Draw a Line with Pen Tool on Canvas Smothly without Having to Redraw All Other Lines

问题描述

有没有办法避免重绘画布上的所有元素（所以我不必跟踪所有内容），同时仍然可以使用当前绘制的线条获得平滑的绘图体验？

Is there a way to avoid redrawing all the elements on the canvas (so I don't have to keep track of everything), while still having a smooth drawing experience with the currently drawn line?

推荐答案

这个 是一个非常好的问题，但其措辞模糊不清。将来要更加小心措辞问题。

This is a very good question, but its worded vaguely. Please be more careful wording questions in the future.

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

Typically when drawing smooth lines you need to redraw the line from the beginning.

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

You do not need to redraw everything from the beginning though, because you should be following these operations:

1. 将当前画布保存到内存中画布


2. 开始绘制新行


3. 当你'正在画画，你经常：
   
   
   
   • 清除画布
   
   
   • 从内存画布到主画布上绘图
   
   
   • 绘制线到目前为止
   
   

1. Save the current canvas to an in-memory canvas
2. Begin drawing a new line
3. As you're drawing, you are constantly:
   • Clearing the canvas
   • Drawing from in-memory canvas onto main canvas
   • Drawing the line-so-far

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

The only line you need to keep track of (in terms of points) is the "current" one. All the old lines are saved into the bitmap via the in-memory canvas.

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

Here's an example I made a long time ago, dealing with smooth lines specifically. The code organization is weird because I started with someone elses code, but it should give you the basic idea:

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

上面描述的绘图部分见于mousemove：

The drawing part described above is seen in the 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);
    }
};

这篇关于在画布上用钢笔工具画一条线，而不必重绘所有其他线条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！