5

首先我想说我做了很多研究并尝试了自己，但没有任何成功。

我正在使用 Canvas 开发一个类似 MSPaint 的应用程序，我想创建一个铅笔工具，它看起来像手工绘图一样逼真……这是下面链接中使用默认工具的示例： http://www.onemotion .com/flash/sketch-paint/

我尝试使用 mousespeed 和 linewidth 属性，但效果不佳（当我移动鼠标时，整条线会放大和缩小）。我不知道对像素原始数据起作用的算法。

你知道现有的东西或适合应用的算法吗？非常感谢您的帮助

编辑

我决定添加我选择的解决方案，因为它似乎引起了很多人的兴趣。所以，到目前为止我发现的最好的事情是使用这里解释的技术在画布上绘制图像：http: //css.dzone.com/articles/sketching-html5-canvas-and。它就像一个魅力，结果非常令人信服，这很容易实现。在这里试试：http: //tricedesigns.com/portfolio/sketch/brush.html#

4

1 回答 1

29

您可以尝试以下演示

现场演示

您最有可能使用moveTo和lineTo创建路径，如果您这样做，则属性将为路径共享，直到您关闭路径。因此，每次您更改厚度时，您都需要closePath再次调用beginPath。

在我的示例中，我使用Bresenham 的线算法来绘制点。基本上 onmousedown 它开始绘画。然后 onmousemove 它将当前坐标与最后一个坐标进行比较，并绘制它们之间的所有点。它也fillRect用于绘画。根据你移动的速度有多快，这条线会变粗或变细。

这是绘图功能的代码

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    painting = false,
    lastX = 0,
    lastY = 0,
    lineThickness = 1;

canvas.width = canvas.height = 600;
ctx.fillRect(0, 0, 600, 600);

canvas.onmousedown = function(e) {
    painting = true;
    ctx.fillStyle = "#ffffff";
    lastX = e.pageX - this.offsetLeft;
    lastY = e.pageY - this.offsetTop;
};

canvas.onmouseup = function(e){
    painting = false;
}

canvas.onmousemove = function(e) {
    if (painting) {
        mouseX = e.pageX - this.offsetLeft;
        mouseY = e.pageY - this.offsetTop;

        // find all points between        
        var x1 = mouseX,
            x2 = lastX,
            y1 = mouseY,
            y2 = lastY;


        var steep = (Math.abs(y2 - y1) > Math.abs(x2 - x1));
        if (steep){
            var x = x1;
            x1 = y1;
            y1 = x;

            var y = y2;
            y2 = x2;
            x2 = y;
        }
        if (x1 > x2) {
            var x = x1;
            x1 = x2;
            x2 = x;

            var y = y1;
            y1 = y2;
            y2 = y;
        }

        var dx = x2 - x1,
            dy = Math.abs(y2 - y1),
            error = 0,
            de = dy / dx,
            yStep = -1,
            y = y1;

        if (y1 < y2) {
            yStep = 1;
        }

        lineThickness = 5 - Math.sqrt((x2 - x1) *(x2-x1) + (y2 - y1) * (y2-y1))/10;
        if(lineThickness < 1){
            lineThickness = 1;   
        }

        for (var x = x1; x < x2; x++) {
            if (steep) {
                ctx.fillRect(y, x, lineThickness , lineThickness );
            } else {
                ctx.fillRect(x, y, lineThickness , lineThickness );
            }

            error += de;
            if (error >= 0.5) {
                y += yStep;
                error -= 1.0;
            }
        }



        lastX = mouseX;
        lastY = mouseY;

    }
}

​</p>

于 2012-04-12T19:49:56.700 回答