Question

我在这里遇到的困难。在2D画布上工作，我可以在带有四个角度的2D画布中拖动鼠标按钮来创建矩形。此矩形非常灵活，可以通过拖动鼠标在任何方向上移动。

这个矩形看起来应该与我在Image1中完全相同，无论我在哪里移动它。当我通过拖动鼠标从上到下创建这个矩形时，它看起来很完美，但是当我将它转到左侧时，你可以看到Image2，角落角度在盒子之外并且很奇怪。当我将光标移到上方时，会发生同样的情况，请参阅Image3。

我希望这个矩形在每一面都看起来像Image1。请任何人帮助我，如何解决这个问题？

Image1 - 所需图像。无论鼠标光标指向哪一侧。

Image2 - 当我移动画布左侧的鼠标点时

Image3 - 当我移动鼠标指向画布的上侧时

 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
     }

如何在2D画布的任何一侧拖动对象，其中包含所有内容

1 个答案: