Javascript Canvas - 矩形のドラッグ＆ドロップを行います。

Question

クリックしてドラッグすると、JavaScriptキャンバスに矩形を描画できます。

私は「ラバーバンド」のようにドラッグしているので、サイズを変更するためにドラッグしているので、長方形を表示する必要があります。そして、それはmouseupで作成します。

私はこれで深刻な問題を抱えています。助けていただければ幸いです！

Answer 1

アルゴリズムは、キャンバスに新しい矩形をクリアし、書き込みにアニメーションフレームのコールバックを使用し

1. になります。 （を参照）

2. マウスの動きの追跡を開始するには、キャンバス上でmousedownイベントとmouseupイベントを使用します。 mousedownイベントは、アニメーション呼び出しを開始して、1x1ピクセルの長方形を描画できます。

3. mousemoveイベントは、アニメーションフレーム描画コードで使用するマウスの位置を記録します。コールバックが保留されていない場合、​​を呼び出すことがあります。

4. ラバーバンドエフェクトを作成するために以前のコンテンツのキャンバスを消去することができれば、マウスアップ時に最後に描画された矩形が結果になります。

5. 既存のコンテンツを保存する必要がある場合は、mousedownでキャンバスのコピーを作成し、新しい矩形を描画する前にキャンバスにコピーしてください。 how to copy a canvas locallyおよび/またはhow to (deep) clone a canvas

ハッピーコーディングのような質問を参照してください、学ぶことがたくさんあります！

Answer 2

まず、ドラッグ（またはマウスの移動）でrectを描画するには、キャンバスをクリアして新しい矩形を描画します。第二に、キャンバスの形はオブジェクトではないので、私が知っている限り、それらとやりとりすることはできません。インタラクティブ性が必要な場合は、svgの使用を検討してください。ここでは、ドラッグ時の描画の実装が不適切です。調査する

$("canvas").mousedown(function(event){ 
    var ctx = this.getContext("2d"); 
    ctx.clearRect(0,0,$(this).width(),$(this).height()); 
    var initialX = event.clientX - this.getBoundingClientRect().left; 
    var initialY = event.clientY - this.getBoundingClientRect().top; 

    $(this).mousemove(function(evt) { 
     ctx.strokeRect(initialX, initialY, evt.clientX - event.clientX, evt.clientY - event.clientY); 
    }); 
});