html - 使用 jquery mobile 在移动应用程序的 html5 Canvas 上绘制平滑线

Question

我正在尝试在 Canvas 上作画，例如使用 jquery mobile 在 Canvas 中使用铅笔工具作画。

我搜索了很多链接，其中大部分是针对桌面的，我尝试为移动应用程序实现相同的逻辑，我只能获取点击事件，但无法在 Canvas 上绘制线条。

这就是我试图在移动设备上实现的 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);
        });

在上面的代码中，我能够获取所有触摸事件，但无法绘制线条。

我怎样才能在 Canvas 上画线？？..

谢谢:)

Answer 1

您可以使用 sketch.js ( http://intridea.github.io/sketch.js/ ) 并稍作修改，使其在移动设备上运行。修改在 leonth 的评论中给出: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;
...

Here is a DEMO FIDDLE, try it from mobile device.