javascript - クリック、マウスの移動、およびクリックを使用して長方形を描く

Question

ユーザーのクリック、マウスの移動、クリックで四角形を描画しようとしています。私のコードには2つの問題があります。

まず、1 つの長方形が描画されると、別の長方形が描画されると自動的に想定されます。次に、2 番目の長方形の開始点は、最初の長方形を作成した最後のクリックです。

http://jsbin.com/uqonuw/3/edit

Answer 1

クリック-移動-クリックして長方形を作成する方法は次のとおりです

次の変数を作成します。

var isDrawing=false;
var startX;
var startY;

mousedown イベント ハンドラーで:

• これが開始クリックの場合は、isDrawing フラグを設定し、startX/Y を設定します。
• これが最後のクリックの場合は、isDrawing フラグをクリアし、長方形を描画します。

ユーザーが描画中であることを認識できるように、マウス カーソルを変更することもできます。

if(isDrawing){
    isDrawing=false;
    ctx.beginPath();
    ctx.rect(startX,startY,mouseX-startX,mouseY-startY);
    ctx.fill();
    canvas.style.cursor="default";
}else{
    isDrawing=true;
    startX=mouseX;
    startY=mouseY;
    canvas.style.cursor="crosshair";
}

ここにフィドルがあります：http://jsfiddle.net/m1erickson/7uNfW/

クリック - 移動 - クリックの代わりに、ドラッグを使用して長方形を作成するのはどうですか?

次の変数を作成します。

var mouseIsDown=false;
var startX;
var startY;

mousedown イベント ハンドラーで、mouseIsDown フラグを設定し、startX/Y を設定します。

必要に応じて、カーソルを変更して、ユーザーが四角形をドラッグしていることを認識できるようにします。

      mouseIsDown=true;
      startX=mouseX;
      startY=mouseY;
      canvas.style.cursor="crosshair";

mouseup イベント ハンドラーで、mouseIsDown フラグをクリアし、四角形を描画します。

カーソルを変更した場合は、元に戻します。

      mouseIsDown=false;
      ctx.beginPath();
      ctx.rect(startX,startY,mouseX-startX,mouseY-startY);
      ctx.fill();
      canvas.style.cursor="default";