2

我正在制作一个简单的 HTML5 Canvas 绘图应用程序，每次鼠标移动时都会在 ax 和 y 位置放置一个圆圈。（非常常见但未解决的）问题是：当鼠标移动得非常快时（例如比触发鼠标移动事件的速度更快），您最终会在圆圈之间留出空间。

我已经使用 Bresenham 的线算法在一定程度上成功地在间隙之间绘制了圆圈。但是，我遇到了另一个问题：当颜色是半透明时，我会无意中得到淡入淡出的效果。

这是一个例子：

http://i.stack.imgur.com/wY4BM.png

我不明白为什么会这样。您将如何使用 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;
};
4

3 回答 3

1

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

一个简单的通用解决方案将遵循以下原则：

    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 的步长向新位置走去。

于 2013-07-29T12:53:52.483 回答
0

如果我理解得很好，你想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();
于 2013-08-06T15:07:27.010 回答
0

我已经想通了。

“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();
});
于 2013-08-07T11:35:56.000 回答