2D 캔버스의 모든면에있는 오브젝트를 드래그하는 방법

Question

여기에서 거의 문제가 없습니다. 2D 캔버스에서 작업하고 4 코너 각도의 2D 캔버스에서 마우스 버튼을 드래그하여 사각형을 만들 수 있습니다. 이 직사각형은 유연하고 마우스를 드래그하여 어느 방향으로나 이동할 수 있습니다.

이 사각형은 이미지 1에있는 것과 똑같아 야합니다.이 사각형은 어디를 움직여도 상관 없습니다. 마우스를 드래그하여 위에서 아래로 사각형을 만들면 완벽 해 보이지만 왼쪽으로 돌리면 Image2를 볼 수 있습니다. 코너 각도가 상자 밖에서 이상합니다. 커서를 윗면으로 옮길 때도 마찬가지입니다 (Image3 참조).

모든면에서이 직사각형이 Image1처럼 보이길 원합니다. 아무도 나를 도와 줄 수 있니, 어떻게 고칠 수 있니?

이미지 1 - 원하는 이미지. 어떤 마우스 커서 포인트가 있더라도 상관 없습니다. 나는 캔버스

이미지 3의 마우스 포인트 왼쪽을 이동하면 - -

이미지 2 내가 캔버스의 마우스 포인트 상단면을 이동하면

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 
    }