最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Draw a Line with Pen Tool on Canvas Smothly without Having to Redraw All Other Lines - Stack Overflow

programmeradmin13浏览0评论

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?

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?

Share Improve this question edited Jun 5, 2015 at 20:51 Joshua Pinter 47.6k23 gold badges258 silver badges254 bronze badges asked Dec 28, 2012 at 0:13 MiaMia 6,53113 gold badges53 silver badges83 bronze badges 6
  • I am trying to use canvas for a drawing application. Already getting the mouse positions, but the result is (as you can guess) quite edgy. I'm trying to smooth out the final line, without then need to redraw it every frame from the beginning.. Maybe a way to calculate the smoother version of what is added each frame... – Mia Commented Dec 28, 2012 at 1:06
  • 1 @x3ro if you experience the problem first hand you'll know that this was actually a very good question hiding behind somewhat poor wording. Making an effort before you vote to close a question is usually much appreciated. I've tried to improve the wording, if you care to help... – iwein Commented Mar 21, 2013 at 9:25
  • @iwein: I think that everyone who posts an SO question should make the effort of writing a decent question. In the above that includes, for example, the link to what he's read, and a little code example of what he already has written. Also, the first paragraph makes a statement, the second paragraph asks a question, but I really can't see the direct connection between them (true, one might be able to interpolate, but still). Why should a poor question remain open on the off chance that someone es along who understands it? Why not force the OP to re-word it? – fresskoma Commented Mar 21, 2013 at 9:42
  • @x3ro It was not a poor question, it was poorly worded. Forcing OP to fix it is a much less effective strategy than fixing it yourself. – iwein Commented Mar 21, 2013 at 9:47
  • @Zettam can you provide a couple of links to background material? – iwein Commented Mar 21, 2013 at 9:48
 |  Show 1 more ment

1 Answer 1

Reset to default 8

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. 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
  4. When the line finishes, you save the new canvas to the in-memory canvas and repeat this process

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/NWBV4/10/

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);
    }
};

与本文相关的文章

发布评论

评论列表(0)

  1. 暂无评论