在画布上绘制平滑的线条

Question

我想在画布上画一条线

context.globalCompositeOperation = 'destination-out';
context.globalAlpha = 0.118;

结果如下所示：

如果图像是黄色矩形，则背景。我使用一个圆圈将其拖放到图像上，它将绘制线条。正如你所看到的，我画的线不是那么光滑。您可以看到圆圈，但没有复合线。

我在这里创建了一个JSFiddle：

console.clear();

var history = new Array();

var imageObj = new Image();
var img = null;

stage = new Konva.Stage({
    container: 'container',
    width: 600,
    height: 400
});
layer = new Konva.Layer();
stage.add(layer);

var rect = new Konva.Rect({
      x: 30,
      y: 30,
      width: 438,
      height: 300,
      fill: 'yellow'
    });
layer.add(rect);

var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');



var circle = new Konva.Circle({
    x: 0,
    y: 0,
    radius: 40,
    opacity: 0.7,
    fill: '#ff5e0a',
    stroke: '#d95009',
    strokeWidth: 1,
    draggable: true
});
layer.add(circle);


circle.on('dragmove touchmove', function (e) {
    erase(e.evt.clientX, e.evt.clientY, circle.radius(), img.x(), img.y());
});


imageObj.onload = function () {
    canvas.width = imageObj.width;
    canvas.height = imageObj.height;
    context.drawImage(imageObj, 0, 0, imageObj.width, imageObj.height);

    img = new Konva.Image({
        x: 30,
        y: 30,
        image: canvas
    });

    layer.add(img);

    circle.moveToTop();
    layer.draw();
};

imageObj.crossOrigin = "anonymous";
imageObj.src = "https://dl.dropboxusercontent.com/u/47067729/darth-vader.jpg";


function erase(absX, absY, radius, imgX, imgY) {
    var x = 0;
    var y = 0;

    // set pointer
    circle.x(absX);
    circle.y(absY);

    x= absX - imgX;
    y= absY - imgY;

    context.globalCompositeOperation = 'destination-out';
    context.globalAlpha = 0.118;
    context.beginPath();
    context.arc(x, y, radius, 0, 2 * Math.PI);
    context.fill();

    layer.draw();
}

如何在看不到圆圈的每一小块的情况下绘制更平滑和复合的线条？

Answer 1

假设您的 Konva thingie 没有提供现成的解决方案，您将必须以恒定的位移来插入触摸屏事件位置。

类似这样的：

circle.on('dragmove touchmove', function (e) {

    if (circle.prev_pos) {
        var dx = e.evt.clientX - circle.prev_pos.x;
        var dy = e.evt.clientY - circle.prev_pos.y;
        var dist = Math.max (Math.abs(dx), Math.abs(dy));
        dx = dx / dist;
        dy = dy / dist;
        var x = circle.prev_pos.x;
        var y = circle.prev_pos.y;
        var d;
        for (d = 0 ; d < dist ; d++)
        {
            erase(x, y, circle.radius(), img.x(), img.y());
            x += dx;
            y += dy;
        } 
    }
    circle.prev_pos = { x:e.evt.clientX, y:e.evt.clientY};
});

参见这个小提琴。

Answer 2

如果适合，请使用它或检查算法

lazy-brush - 使用鼠标、手指或任何指点设备平滑绘图

https://github.com/dulnan/catenary-curve

https://github.com/dulnan/lazy-brush