查找由中心角度定义的正方形边的坐标

Question

我试图从一个可变角度出去的正方形中心的虚线找到一个正方形边缘的坐标。那条线与广场边缘相交的地方是我需要的坐标。

例如，正方形为50px X 50px，中心坐标为（10,10），中心线的角度顺时针呈45度角，此线的末端不应挤出正方形，我试图找到这条线末端的x，y坐标。

我使用它是什么，我希望能够像在photoshop中那样在rect（）中旋转线性渐变填充。我也不想使用图书馆，因为我试图“重新发明轮子”，因为我发现它是为自己学习的最佳方式。

我在Javascript中这样做。

提前感谢您提供任何帮助

Answer 1

如果有四个扇区，你必须细分矩形，然后确定你的线在哪个扇区。一种方法是使用普通if语句检查角度值为90°，180°和270°。

一旦有角度扇区，就必须将线条的角度与矩形的对角线角度进行比较，这样就可以确定线条与之碰撞的边缘。

一旦确定了碰撞边缘，你就可以获得一个免费的碰撞坐标（left-x，right-x，top-y或lower-y），另一个坐标可以使用三角函数获得（切线关系） ）。

你会在每个扇区中得到两个基本情况，一个采用相反的腿来形成与一个垂直边缘碰撞形成的右三角形，另一个采用相邻的腿。以下是第一个扇区（右上象限）的示例

if (lineAngle < rectDiagAngle) {

    // For this collision you have the x coordinate, is the same as the
    // right edge x coordinate
    colX = rectX + rectW;

    // Now you need to find the y coordinate for the collision, to do that
    // you just need the opposite leg
    oppositeLegLength = Math.tan(lineAngle) * (rectW / 2);
    colY = rectCenterY - oppositeLegLength;

} else { 
    // The line collides with the top edge

    // For this collision you have the y coordinate, is the same as the
    // top edge y coordinate
    colY = rectY;

    // Now you need to find the x coordinate for the collision, to do
    // that you just need the adjacent leg
    adjacentLegLength = (rectH / 2) / Math.tan(lineAngle);
    colX = rectCenterX + adjacentLegLength;
}

This fiddle获取角度，计算碰撞点，然后从矩形中心到碰撞点绘制一条线。