2Dキャンバスの任意の側面にあるオブジェクトをドラッグする方法

Question

ここではほとんど問題はありません。 2Dキャンバスで作業し、四角形の2Dキャンバスにマウスボタンをドラッグして長方形を作成することができます。この矩形は柔軟で、マウスをドラッグすることで任意の方向に移動できます。

この矩形は、Image1にあるものとまったく同じように見えるはずです。この四角形を上から下にマウスをドラッグして作成すると完璧に見えますが、これを左に回すと、Image2が見えます。コーナーの角はボックスの外にあり、奇妙です。これは、カーソルを上側に移動した場合も同じです（Image3を参照）。

この矩形は、すべての面でImage1のように見えます。誰でも助けてください、どうすればこの問題を解決できますか？

Image1 - 希望する画像。どちらのマウスカーソルポイントでも問題ありません。

画像2 - 私はキャンバスのマウス点左側移動

画像3 - 私はキャンバス

function drawBox(x, y, w, h, crosshairSize, detailWidth, fill, detailCol) { 
     ctx.globalAlpha = 0.3; 
     function drawCross(x, y, s, w) { // draw crosshair s is size, w is width 
      const hw = w/2; // half width 
      ctx.beginPath(); 
      ctx.lineTo(x - hw, y - hw); 
      ctx.lineTo(x - hw, y - s); 
      ctx.lineTo(x + hw, y - s); 
      ctx.lineTo(x + hw, y - hw); 
      ctx.lineTo(x + s, y - hw); 
      ctx.lineTo(x + s, y + hw); 
      ctx.lineTo(x + hw, y + hw); 
      ctx.lineTo(x + hw, y + s); 
      ctx.lineTo(x - hw, y + s); 
      ctx.lineTo(x - hw, y + hw); 
      ctx.lineTo(x - s, y + hw); 
      ctx.lineTo(x - s, y - hw); 
      ctx.closePath(); 
      ctx.fill() 
     } 

     function drawCorner(x, y, dx, dy, s, w) { // draw crosshair s is size, w is width 
      // dx and dy are directions   
      const hw = w/2; // half width 
      ctx.beginPath(); 
      ctx.lineTo(x, y); 
      ctx.lineTo(x + dx * s, y); 
      ctx.lineTo(x + dx * s, y + dy * w); 
      ctx.lineTo(x + dx * w, y + dy * w); 
      ctx.lineTo(x + dx * w, y + dy * s); 
      ctx.lineTo(x, y + dy * s); 
      ctx.closePath(); 
      ctx.fill(); 
     } 
     ctx.fillStyle = fill; 
     ctx.fillRect(x, y, w, h); 
     ctx.fillStyle = detailCol; 
     drawCross(x + w/2, y + h/2, crosshairSize, detailWidth); 
     drawCorner(x, y, 1, 1, crosshairSize * 2, detailWidth); 
     drawCorner(x + w, y, -1, 1, crosshairSize * 2, detailWidth); 
     drawCorner(x + w, y + h, -1, -1, crosshairSize * 2, detailWidth); 
     drawCorner(x, y + h, 1, -1, crosshairSize * 2, detailWidth); 
}` //end of function` 



//calling drawBox function 
drawBox(startposition.x, startposition.y, width * 2, height * 2, crosshairSize, 1, "#6E97B1", '#0055FE'); 

Answer 1

のマウス点上側に移動すると、私はそれらのコーナーを分析し、この溶液に付属私はこの矩形をドラッグしています。そう、その後方向の助けを借りて、いくつかの条件を適用するこの

 directionX = previousMousePosition.x - startposition.x; 
    directionY = previousMousePosition.y - startposition.y; 

のような方向を計算

function drawCorner(x, y, dx, dy, s, w) { // draw crosshair s is size, w is width 

     // dx and dy are directions   
     const hw = w/2; // half width 
     ctx.beginPath(); 
     ctx.lineTo(x, y); 
     ctx.lineTo(x + dx * s, y); 
     ctx.lineTo(x + dx * s, y + dy * w); 
     ctx.lineTo(x + dx * w, y + dy * w); 
     ctx.lineTo(x + dx * w, y + dy * s); 
     ctx.lineTo(x, y + dy * s); 
     ctx.closePath(); 
     ctx.fill(); 

    } 

    var crosshairSize = 10; 
    var detailWidth = 2; 
    if (directionY > 0 && directionX > 0) // down 
    { 
     drawCorner(startposition.x, startposition.y, 1, 1, crosshairSize * 2, detailWidth); //1 
     drawCorner(startposition.x + directionY , startposition.y, -1, 1, crosshairSize * 2, detailWidth); //2 
     drawCorner(startposition.x + directionY , startposition.y + directionX , -1, -1, crosshairSize * 2, detailWidth); //3 
     drawCorner(startposition.x, startposition.y + directionX , 1, -1, crosshairSize * 2, detailWidth); //4 
    } 
    if (directionY < 0 && directionX > 0) {  // up 

     drawCorner(startposition.x, startposition.y + directionY , 1, 1, crosshairSize * 2, detailWidth); //1 
     drawCorner(startposition.x + directionX , startposition.y + directionY , -1, 1, crosshairSize * 2, detailWidth); //2 
     drawCorner(startposition.x + directionX , startposition.y, -1, -1, crosshairSize * 2, detailWidth); //3 
     drawCorner(startposition.x, startposition.y, 1, -1, crosshairSize * 2, detailWidth); //4 
    } 
    if (directionY > 0 && directionX < 0) { //left 

     drawCorner(startposition.x + directionX , startposition.y, 1, 1, crosshairSize * 2, detailWidth); //1 
     drawCorner(startposition.x, startposition.y, -1, 1, crosshairSize * 2, detailWidth); //2 
     drawCorner(startposition.x, startposition.y + directionY , -1, -1, crosshairSize * 2, detailWidth); //3 
     drawCorner(startposition.x + directionX , startposition.y + directionY , 1, -1, crosshairSize * 2, detailWidth); //4 
    } 

    if (directionY < 0 && directionX < 0) { // upper left 

     drawCorner(startposition.x + directionX , startposition.y + directionY , 1, 1, crosshairSize * 2, detailWidth); //1 
     drawCorner(startposition.x, startposition.y + directionY , -1, 1, crosshairSize * 2, detailWidth); //2 
     drawCorner(startposition.x, startposition.y, -1, -1, crosshairSize * 2, detailWidth); //3 
     drawCorner(startposition.x + directionX , startposition.y, 1, -1, crosshairSize * 2, detailWidth); //4 
    }