Javascript don';Don’不要让一个正方形超过第二个正方形

Javascript don';Don’不要让一个正方形超过第二个正方形,javascript,rotation,geometry,draggable,square,Javascript,Rotation,Geometry,Draggable,Square,我有两个正方形和所有的位置 旋转正方形 sq1.x1y1 sq1.x2y2 sq1.x3y3 sq1.x4y4 sq1.maxX sq1.minX sq1.maxY sq1.minY sq1.rotatedAngl sq1.cX sq1.cY 旋转前的所有位置 第二个广场呢 sq2.x1y1 sq2.x2y2 sq2.x3y3 sq2.x4y4 sq2.maxX sq2.minX sq2.maxY sq2.minY sq2.cX sq2.cY 这是我的方块 拖动正方形1并停止后 旋转

我有两个正方形和所有的位置 旋转正方形

sq1.x1y1
sq1.x2y2
sq1.x3y3
sq1.x4y4 
sq1.maxX
sq1.minX
sq1.maxY
sq1.minY
sq1.rotatedAngl
sq1.cX
sq1.cY
旋转前的所有位置

第二个广场呢

sq2.x1y1
sq2.x2y2
sq2.x3y3
sq2.x4y4 
sq2.maxX
sq2.minX
sq2.maxY
sq2.minY
sq2.cX
sq2.cY
这是我的方块

拖动正方形1并停止后

旋转45度后

在拖动方块1之后


当角点2与角点1相交时,我希望停止拖动,因为每个角点都有坐标。可以通过两个角定义线段。 可以获得从一个角点(要拖动的正方形)到另一个正方形线段的距离

距离公式及其符号可以如下所示:


你可以比较正方形两条平行边的符号。如果两个都是“左”或“右”,则点位于正方形外部。

正方形可以定义为三重
{center1,side,angle}
,其中
center={double center.x,double center.y}
是正方形的中心,
double side
是正方形侧面的长度,最后,
双角度
是正方形从水平方向旋转的角度

给定两个正方形,可以将它们表示为
square1={center1,side1,angle1}
square2={center2,side2,angle2}
。算法的思想是:

步骤1:按角度
-angle1
旋转
square2
,使其侧面与坐标轴平行,如第一个示例所示。获得新的

square1 ---> sqare10 = {center1, side1, 0}
第2步:旋转
square2
角度
-angle1
。获得新的方块

square2 ---> sqare20 = {center2, side2, angle2 - angle1}
第3步:引入新的正方形
square30={center2,side3,0}
,使该新正方形成为包含
sqare20
的最小正方形,其边平行于坐标轴(square20的四个顶点位于square30的边上,且两个顶点共享同一中心)。square30的边长计算如下:

side3 = side2 * (cos(angle2 - angle1) + sin(angle2 - angle1))
第4步:现在您处于第一个示例的情况,其中一对正方形
square10
square30
的边平行于坐标轴。检查这两个正方形的相对位置:
square10
square30

  • 如果
    square30
    完全在
    square10
    内,则原始
    square2
    完全在原始
    square1

  • 否则,如果
    square30
    的边与
    square10
    的边接触,则原始
    square2
    的顶点与原始
    square1