2

キャンバスで線を引こうとしたときに奇妙な問題に気づきました。最初にクリックしたときにポイントを保存し（これがパスの開始ポイントになります）、もう一度クリックして最初のポイントがすでに保存されている場合は、終了ポイントを保存する簡単なスクリプトがあります。だから私はパスの始点と終点を持っています、これはOKです。この後、.moveTo()、.lineTo()、.stroke() 関数を使用して線を描画します。ここで問題が発生します。X 座標は常に元の座標の 1.4 倍になり、Y 座標は元の座標 (開始点と終了点の両方) の 0.8 倍になります。この問題の原因がわかりません。私は変数をトレースしており、.moveTo() および .lineTo() 関数は正しい座標を取得していますが、それらはその変換された線を描画しています。

これが私のコードの写真です：

var points = [null, null];
var canvas = $('canvas#myid');
var ctx = canvas[0].getContext("2d");
var end = false;

$(canvas).click(function(event) {
   if ( null == points[0] ) { 
      // First click - first coordinates
      points[0] = [event.pageX, event.pageY];
   } else if ( null == points[1] && null != points[0] ) {
      // Second click - second coordinates
      points[1] = [event.pageX, event.pageY];
      ctx.fillStyle = "black";
      ctx.moveTo(points[0][0], points[0][1]);
      ctx.lineTo(points[1][0], points[1][1]);
      ctx.stroke();
      end = true;
   } else if ( null != points[0] && null != points[1] ) end = true;

   if ( true === end ) {
      points = [null, null];
   }
}

わかりません、皆さんが私を助けてくれることを願っています、ありがとう！

4

1 に答える 1

1

コードの最後で括弧を閉じるのを忘れた);ので、使用する必要はありません。jsFiddleLiveDemo$(canvas).のように使用する必要があります。canvas. 

$(function()
{
    var points = [null, null];
    var canvas = $('canvas#myid');
    var ctx = canvas[0].getContext("2d");
    var end = false;
    canvas.click(function(event) 
    {
           if ( null == points[0] ) 
           { 
                  // First click - first coordinates
                  points[0] = [event.pageX, event.pageY];
           } 
           else if ( null == points[1] && null != points[0] ) 
           {
                  // Second click - second coordinates
                  points[1] = [event.pageX, event.pageY];
                  ctx.fillStyle = "black";
                  ctx.moveTo(points[0][0], points[0][1]);
                  ctx.lineTo(points[1][0], points[1][1]);
                  ctx.stroke();
                  end = true;
           } 
           else if ( null != points[0] && null != points[1] ) 
           {
                 end = true;
           }
           if ( true === end ) 
           {
                points = [null, null];
           }
    }); // Here you missed
});
于 2013-01-13T13:23:04.603 に答える