0

アプリケーション用のHTML5キャンバスを製図板として機能させようとしています。私が直面している問題は次のとおりです。

描画は、マウスポインタから少し離れた場所で行われます。Jquery.offsetメソッドを使用して、キャンバス上のイベントのオフセットを計算しています。もう1つ奇妙なことに、キャンバスタグの幅は150ピクセルですが、（0,10）から（150,10）に引かれた線は、キャンバス領域のちょうど中間に達し、（ 0,10）から（250,10）も表示されます。イベントオブジェクトから計算された「ピクセル」は、Canvasタグの「ポイント座標」に直接マップされていませんか？ここで他に何が間違っている可能性がありますか？サンプルコード：

 if (event.pageX || event.pageY)
 {
    event._x = event.pageX;
    event._y = event.pageY;
}
else if (event.clientX || event.clientY)
{
    event._x = event.clientX + document.body.scrollLeft
                            + document.documentElement.scrollLeft;
    event._y = event.clientY + document.body.scrollTop
                            + document.documentElement.scrollTop;
}

var canvasElem = $('#' + canvasId);
canvasOffset = canvasElem.offset();

event._x -= Math.floor(canvasOffset.left);
event._y -= Math.floor(canvasOffset.top);

////////////// CODE STRIPPED //////////////////////////////


  this.mousedown = function (ev) { 
       context.beginPath(); 
       context.moveTo(ev._x, ev._y); 
       tool.started = true; 
  }; 

  // This function is called every time you move the mouse. Obviously, it only  
  // draws if the tool.started state is set to true (when you are holding down  
  // the mouse button). 
 this.mousemove = function (ev) { 
      if (tool.started) { 
         context.lineTo(ev._x, ev._y); 
         context.stroke(); 
       } 
 }; 

// This is called when you release the mouse button. 
this.mouseup = function (ev) { 
      if (tool.started) { 
         tool.mousemove(ev); 
         tool.started = false; 
      }
}

解決しました

問題が見つかりました：

文字列を使用して、キャンバスの高さと幅を設定していました。次のようなもの：canvas.height = "200px";

むしろ、キャンバスのように高さ/幅を設定するために常に数字を使用する必要があります。canvas.height = 200;

それで問題は解決します。

4

1 に答える 1

1

jQuery .offset（）関数を使用して、キャンバスの左上隅の座標を取得できます。マウスイベントによって配信された座標からこれらを引くと、キャンバス上の位置がわかります。

発生するスケーリングの問題に関して、2つの考えられる説明があります。

A：平行移動、変換、または拡大縮小を使用して、キャンバスの座標系を変更します（ただし、これを行う場合は、確実に認識されます）。

B： CSSスタイルのプロパティを使用してキャンバスのサイズを変更しています。キャンバスの解像度は、 HTMLタグのプロパティwidthとheightプロパティによって決まります。<canvas>CSSを使用してキャンバスがレンダリングされる幅または高さを変更すると、最初に内部解像度で描画され、次にブラウザーに表示するためにそれに応じて拡大縮小されます。

于 2013-01-18T12:31:47.210 に答える