画布：你会如何使用Bresenham的线算法在两点之间正确插值？

Question

我正在制作一个简单的HTML5画布绘图应用程序，每次鼠标移动时，都会在x和y位置放置一个圆圈。（非常常见但尚未解决的）问题是：当鼠标移动得非常快（比如比鼠标移动事件触发得更快）时，圆圈之间就有了空间。

我使用了Bresenham的直线算法，在一定程度上成功地在间隙之间画出了圆圈。然而，我遇到了另一个问题：当颜色是半透明的时候，我会无意中淡出到更深的效果。

这里有一个例子：

我不明白为什么会这样。如何使用Bresenham的直线算法在两点之间正确插值？还是其他算法？

这是我的代码：http://jsfiddle.net/E5NBs/

var x = null;
var y = null;
var prevX = null;
var prevY = null;
var spacing = 3;
var drawing = false;
var size = 5;
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

function createFlow(x1, y1, x2, y2, callback) {
    var dx = x2 - x1;
    var sx = 1;
    var dy = y2 - y1;
    var sy = 1;
    var space = 0;

    if (dx < 0) {
        sx = -1;
        dx = -dx;
    }

    if (dy < 0) {
        sy = -1;
        dy = -dy;
    }

    dx = dx << 1;
    dy = dy << 1;

    if (dy < dx) {
        var fraction = dy - (dx >> 1);

        while (x1 != x2) {
            if (fraction >= 0) {
                y1 += sy;
                fraction -= dx;
            }

            fraction += dy;
            x1 += sx;

            if (space == spacing) {
                callback(x1, y1);
                space = 0;
            } else {
                space += 1;
            }
        }
    } else {
        var fraction = dx - (dy >> 1);

        while (y1 != y2) {
            if (fraction >= 0) {
                x1 += sx;
                fraction -= dy;
            }

            fraction += dx;
            y1 += sy;

            if (space == spacing) {
                callback(x1, y1);
                space = 0;
            } else {
                space += 1;
            }
        }
    }

    callback(x1, y1);
}

context.fillStyle = '#FFFFFF';
context.fillRect(0, 0, 500, 400);

canvas.onmousemove = function(event) {
    x = parseInt(this.offsetLeft);
    y = parseInt(this.offsetTop);

    if (this.offsetParent != null) {
        x += parseInt(this.offsetParent.offsetLeft);
        y += parseInt(this.offsetParent.offsetTop);
    }

    if (navigator.appVersion.indexOf('MSIE') != -1) {
        x = (event.clientX + document.body.scrollLeft) - x;
        y = (event.clientY + document.body.scrollTop) - y;
    } else {
        x = event.pageX - x;
        y = event.pageY - y;
    }

    context.beginPath();
    if (drawing == true) {
        if (((x - prevX) >= spacing || (y - prevY) >= spacing) || (prevX - x) >= spacing || (prevY - y) >= spacing) {
            createFlow(x, y, prevX, prevY, function(x, y) {
                context.fillStyle = 'rgba(0, 0, 0, 0.1)';
                context.arc(x, y, size, 0, 2 * Math.PI, false);
                context.fill();
            });

            prevX = x, prevY = y;
        }
    } else {
        prevX = x, prevY = y;
    }
};

canvas.onmousedown = function() {
    drawing = true;
};

canvas.onmouseup = function() {
    drawing = false;
};

Answer 1

我已经想通了。

"context.beginPath（）；"需要在createFlow回调函数中，如下所示：

createFlow(x, y, prevX, prevY, function(x, y) {
    context.beginPath();
    context.fillStyle = 'rgba(0, 0, 0, 0.1)';
    context.arc(x, y, size, 0, 2 * Math.PI, false);
    context.fill();
});

Answer 2

如果我理解得很好，你希望每个点上都有rgba（0, 0, 0, 0.1)。如果是这样，那么你可以在绘制新点之前清除该点。

// this is bad way to clear the point, just I don't know canvas so well
context.fillStyle = 'rgba(255, 255, 255, 1)';
context.arc(x, y, size, 0, 2 * Math.PI, false);
context.fill();

context.fillStyle = 'rgba(0, 0, 0, 0.1)';
context.arc(x, y, size, 0, 2 * Math.PI, false);
context.fill();

Answer 3

HTML画布支持分数/浮点坐标，因此使用基于整数坐标的像素画布算法是不必要的，甚至可能被认为是适得其反的。

一个简单、通用的解决方案应该是这样的：

    when mouse_down:
      x = mouse_x
      y = mouse_y
      draw_circle(x, y)
      while mouse_down:
        when mouse_moved:
          xp = mouse_x
          yp = mouse_y
          if (x != xp or y != yp):
            dir = atan2(yp - y, xp - x)
            dist = sqrt(pow(xp - x, 2) + pow(yp - y, 2))
            while (dist > 0):
              x = x + cos(dir)
              y = y + sin(dir)
              draw_circle(x, y)
              dist = dist - 1

也就是说，每当鼠标移动到与最后绘制的圆的位置不同的位置时，都要用距离为1的步向新位置走去。