使用jquery在html5画布上绘制移动应用程序的平滑线

Question

我试图在画布上画画，就像用jquery在画图中使用铅笔工具一样。

我搜索了很多链接，其中大部分是桌面链接，我试图为移动应用程序实现相同的逻辑，我只能获得点击事件，但无法在画布上画线。

这就是我试图在移动http://jsfiddle.net/loktar/dQppK/23/上实现的。

这是我的密码

$(document).on(
        'pageshow',
        '#canvaspage',
        function() {
            var painting = false;
            var c = document.getElementById("myCanvas");
            var ctx = c.getContext("2d");
            // ctx.fillStyle="#FF0000";
            // ctx.fillRect(0,0,150,75);
            // ctx.drawImage(icons-18-black.png)

            ctx.canvas.width = window.innerWidth * 0.8;
            ctx.canvas.height = window.innerHeight * 0.8;

            var imageObj = new Image();

            imageObj.onload = function() {
                ctx.drawImage(imageObj, 0, 0, ctx.canvas.width * 0.8,
                        ctx.canvas.height * 0.7);
            };
            imageObj.src = 'Image.png';

//          c.addEventListener('touchstart', function(e) {
            $("#myCanvas").on("touchstart",function(e){
                painting = true;
                e.preventDefault();

                ctx.fillStyle = "#FF0000";
                lastX = e.pageX - this.offsetLeft;
                lastY = e.pageY - this.offsetTop;

            });

//          c.addEventListener('touchend', function(e) {
            $("#myCanvas").on("touchend",function(e){
                painting = false;

            });

//          c.addEventListener('touchmove', function(e) {

            $("#myCanvas").on("touchmove",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;   
                        }
                        alert(painting +" " +x1 +" "+x2);
                        for (var x = x1; x < x2; x++) {

//                          alert(x +" "+ y +" "+ lineThickness);
                            if (steep) {
                                ctx.fillRect(y, x, lineThickness , lineThickness );
                            } else {
                                ctx.fillRect(x, y, lineThickness , lineThickness );
                            }
                            alert(steep);
                            error += de;
                            if (error >= 0.5) {
                                y += yStep;
                                error -= 1.0;
                            }
                        }



                        lastX = mouseX;
                        lastY = mouseY;

                    }



//              ctx.fillRect(0, 0, 150, 75);
                e.preventDefault();
            }, false);
        });

在上面的代码中，我能够获得所有的触摸事件，但是无法画出这条线。

我怎样才能在画布上画线？

谢谢：)

Answer 1

您可以使用sketch.js (http://intridea.github.io/sketch.js/)对其进行小修改，使其在移动环境下工作。在这里的注释中给出了修改：https://github.com/intridea/sketch.js/issues/1；您基本上在mousedown/touchstart事件上为插件添加了3行：

switch (e.type) {
    case 'mousedown':
    case 'touchstart':          
      if (this.painting) {    //add
        this.stopPainting();  //add
      }                       //add
      this.startPainting();
      break;
...

这是一个演示小提琴，从移动设备上试试。