2016-12-19 21 views
1
<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 
    <title> canvas </title> 
    <style type="text/css"> 
     #canvasId { 
      background-color: #FFFFcc; 
     } 
    </style> 

</head> 
<body> 

    <canvas id="canvasId" width="700" height="500"></canvas><br /> 
    <input type="button" value="clear" onclick="hw.clear();" /> 
    <script type="text/javascript"> 
     function Handwriting(id) { 
      this.canvas = document.getElementById(id); 
      this.ctx = this.canvas.getContext("2d"); 
      this.ctx.fillStyle = "rgba(0,0,0,0.25)"; 
      var _this = this; 
      this.canvas.onmousedown = function (e) { _this.downEvent(e)}; 
      this.canvas.onmousemove = function (e) { _this.moveEvent(e)}; 
      this.canvas.onmouseup = function (e) { _this.upEvent(e)}; 
      this.canvas.onmouseout = function (e) { _this.upEvent(e)}; 
      this.canvas.addEventListener('touchstart', function (e) { _this.downEvent(e)}); 
      this.canvas.addEventListener('touchmove ', function (e) { _this.moveEvent(e)}); 
      this.canvas.addEventListener('touchend ', function (e) { _this.upEvent(e)}); 
      this.moveFlag = false; 
      this.upof = {}; 
      this.radius = 0; 
      this.has = []; 
      this.lineMax = 15; 
      this.lineMin = 1; 
      this.linePressure = 1; 
      this.smoothness = 80; 
     }    
     Handwriting.prototype.clear = function() { 
      this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height); 
     } 
     Handwriting.prototype.downEvent = function (e) { 
      this.moveFlag = true; 
      this.has = []; 
      this.upof = this.getXY(e); 
     }    
     Handwriting.prototype.moveEvent = function (e) { 
      if (!this.moveFlag) 
       return; 
      var of = this.getXY(e); 
      var up = this.upof; 
      var ur = this.radius; 
      this.has.unshift({time:new Date().getTime() ,dis:this.distance(up,of)}); 
      var dis = 0; 
      var time = 0; 
      for (var n = 0; n < this.has.length-1; n++) { 
       dis += this.has[n].dis; 
       time += this.has[n].time-this.has[n+1].time; 
       if (dis>this.smoothness) 
        break; 
      } 
      var or = Math.min(time/dis*this.linePressure+this.lineMin , this.lineMax)/2; 
      this.radius = or; 
      this.upof = of; 
      if (this.has.length<=4) 
       return; 
      var len = Math.round(this.has[0].dis/2)+1; 
      for (var i = 0; i < len; i++) { 
       var x = up.x + (of.x-up.x)/len*i; 
       var y = up.y + (of.y-up.y)/len*i; 
       var r = ur + (or-ur)/len*i; 
       this.ctx.beginPath(); 
       this.ctx.arc(x,y,r,0,2*Math.PI,true); 
       this.ctx.fill(); 
      } 
     }    
     Handwriting.prototype.upEvent = function (e) { 
      this.moveFlag = false; 
     }    
     Handwriting.prototype.getXY = function (e) 
     { 
      return { 
       x : e.clientX - this.canvas.offsetLeft + (document.body.scrollLeft || document.documentElement.scrollLeft), 
       y : e.clientY - this.canvas.offsetTop + (document.body.scrollTop || document.documentElement.scrollTop) 
      } 
     }    
     Handwriting.prototype.distance = function (a,b) 
     { 
      var x = b.x-a.x , y = b.y-a.y; 
      return Math.sqrt(x*x+y*y); 
     } 
     var hw = new Handwriting("canvasId"); 
     hw.lineMax = 40; 
     hw.lineMin = 5; 
     hw.linePressure = 2.5; 
     hw.smoothness = 100;  
    </script> 
</body> 
</html> 

私の上司はキャンバスを使用してシグネチャ機能を使用したいと思いますが、私はこのコードを見つけることができませんなぜそれが仕事ではないのですか?コードthis.canvas.addEventListener('touchstart', function (e) { _this.downEvent(e)});を追加しましたが、まだ動作していないので、皆さんは知りますか?たくさん!このコードはPCブラウザでうまく動作しますが、モバイルでは動作しません

+0

'あなたが投稿したコードには 'touchstart'がありません(touchendもありません - どちらが電子メールでもあります) xxx) –

+0

コードを追加しました – WUSO01

+0

CSSがCSSと何をしているのですか? –

答えて

1

まず - 'touchmove ''touchend 'は彼らに

をそのスペースを持つべきではありませんので、あなたは

this.canvas.addEventListener('touchmove', function (e) { _this.moveEvent(e)}); 
this.canvas.addEventListener('touchend', function (e) { _this.upEvent(e)}); 

を修正する必要が続いてgetXY機能は、タッチイベントのためにgetXYに必要あまりに

Handwriting.prototype.getXY = function(e) { 
    var x, y; 
    if (e.changedTouches && e.changedTouches[0]) { 
     var offsety = this.canvas.offsetTop || 0; 
     var offsetx = this.canvas.offsetLeft || 0; 
     x = e.changedTouches[0].pageX - offsetx; 
     y = e.changedTouches[0].pageY - offsety; 
    } else if (e.layerX || 0 == e.layerX) { 
     x = e.layerX; 
     y = e.layerY; 
    } else if (e.offsetX || 0 == e.offsetX) { 
     x = e.offsetX; 
     y = e.offsetY; 
    } 
    return { 
     x: x, 
     y: y 
    }; 
} 
+0

ありがとう、私はしようとします – WUSO01

関連する問題