在html5畫布上繪製流暢的線條使用jquery mobile的移動應用程序

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/），使其在移動設備上運行。該修改在leonth的評論中給出：https://github.com/intridea/sketch.js/issues/1;你基本上添加3線插件上的鼠標按下/ touchstart事件：

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.