使用HTML5 Canvas为绘画应用程序创建现实的铅笔工具 [英] Create a realistic pencil tool for a painting app with HTML5 Canvas

问题描述

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

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

我试图使用mousespeed和linewidth属性，但它不能正常工作（整个线移动鼠标时放大和缩小）。我不知道对像素原始数据采用算法。

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

编辑

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

祝大家好运）

解决方案

尝试类似下面的演示

Live Demo

您最有可能使用 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; 
 
 //查找
之间的所有点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  yStep = 1; 
} 
 
 lineThickness = 5-Math.sqrt（（x2-x1）*（x2-x1）+（y2-y1）*（y2-y1） 
 if（lineThickness< 1）{
 lineThickness = 1; 
} 
 
 for（var x = x1; x< x2; x ++）{
 if（steep）{
 ctx.fillRect（y，x，lineThickness ， 线的粗细 ）; 
} else {
 ctx.fillRect（x，y，lineThickness，lineThickness）; 
} 
 
错误+ = de; 
 if（error> = 0.5）{
 y + = y Step; 
 error  -  = 1.0; 
} 
} 
 
 
 
 lastX = mouseX; 
 lastY = mouseY; 
 
} 
} 
  

First I want to say that I made a lot of research and tries myself without any success.

I am working on a MSPaint-like application using Canvas, and I would like to create a pencil tool which looks realistic like handmade drawings... Here is an example in the link below with the default tool : http://www.onemotion.com/flash/sketch-paint/

I tried to play with mousespeed and linewidth properties but it is not working well (the entire line enlarge and shrink as I move the mouse). I have no idea of an algorithm acting on pixel raw data.

Do you know something existing or a suitable algorithm to apply ? Thank you very much for your help

EDIT

I decided to add the solution I've chosen because it seems to interest lot of people. So, the best thing I found so far is to draw an image onto the canvas, using the technique explained here : http://css.dzone.com/articles/sketching-html5-canvas-and. It works like a charm, the result is really convincing and this is quite easy to implement. Try it out here : http://tricedesigns.com/portfolio/sketch/brush.html#

Good luck everyone :)

解决方案

You could try something like the following demo

Live Demo

Your most likely using moveTo and lineTo to create the paths, if you do it that way the properties will be shared for the path until you close the path. So everytime you change the thickness youd need to call closePath and then beginPath again.

In my example I use Bresenham's line algorithm to plot the points. Basically onmousedown it starts painting. Then onmousemove it compares the current coordinates with the last coordinates and plots all of the points between. Its also using fillRect to paint. Based on how fast your moving the line will be thicker or thinner.

Heres the code for the drawing function

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;

    }
}

​

这篇关于使用HTML5 Canvas为绘画应用程序创建现实的铅笔工具的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！