-1

html5で線要素を描きたい

私がやりたいのはこんな感じ

mousedownイベントが私の開始位置（x、y）になります。

mousemove

マウスがmouseupの場合、それは終了位置になります。

私はすでにこの部分をしました

私が本当に望んでいるのは、マウスを動かしているときにキャンバスに描かれた線を確認することです。すでにマウスを押していないときに、マウスを動かして押し出すときにプレビューされるときに、線がキャンバスに正確に描かれます。

これが私のコードです

canvas_draw.addEventListener('mousemove',function(e){
x=e.pageX-canvas_draw.offsetLeft;
y=e.pageY-canvas_draw.offsetTop;
},false);

canvas_draw.addEventListener('mousedown',function(e){
context_draw.beginPath();
context_draw.moveTo(x,y);
},false);

canvas_draw.addEventListener('mouseup',function(e){
context_draw.lineTo(x,y);
context_draw.stroke();
context_draw.closePath();

},false);
4

1 に答える 1

4

あなたの意図は、ユーザーがカーソルを動かしながら動く「プレビュー」線をリアルタイムで見ることだと思います。問題は、mousemoveイベント中に線を引くと、線が消去されないことです。カーソルが新しい位置に移動します。

この問題を解決するための2つのアプローチがあります。

a）を使用して新しい非表示のキャンバスに描画することにより、mousedownイベントでキャンバスのバックアップコピーを作成しますdrawImage()。mousemoveで線を描画する前に、バックアップコピーを実際のキャンバスに描画して、前のmousemoveイベントで描画した線を消去します（前の線で覆われた部分をコピーするだけでパフォーマンスを向上させることができます）。

b）実際のキャンバスの上に新しい透明なキャンバスを作成し、プレビューラインなどのユーザーインターフェイス要素に使用します。そうすれば、その下にある実際のキャンバスに損傷を与えることなく、自由に消去できます（ほとんどのイベントは、一番上のキャンバスによってキャッチされることに注意してください）。

于 2013-01-07T09:21:26.940 に答える