不要让一个广场超出第二个广场

时间:2019-06-12 14:57:55

标签: javascript rotation geometry draggable square

我有2个正方形且所有位置 用于旋转的正方形

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

这是我的方块

enter image description here

拖动正方形1并停止

enter image description here

旋转45度后

enter image description here

在拖动正方形1之后

enter image description here

当角2的角与角1相交时,我想停止拖动

2 个答案:

答案 0 :(得分:1)

您拥有每个角的坐标。您可以通过两个角定义线段。 您可以获得从一个角(正方形拖动)到另一个正方形的线段的距离。

距离公式及其符号可以为here

您可以比较正方形的两个平行边的符号。如果两个都在“左边”或两个都在“右边”,则该点在正方形之外。

答案 1 :(得分:1)

可以将正方形定义为三元组{center1, side, angle},其中center = {double center.x, double center.y}是正方形的中心,double side是正方形的边的长度,最后是{{1} }是正方形从水平方向旋转到的角度。

给出两个正方形,您可以将它们表示为 double anglesquare1 = {center1, side1, angle1}。算法的想法是:

步骤1:,如第一个示例所示,将square2 = {center2, side2, angle2}旋转角度square2,以使其侧面平行于坐标轴。获取新的

- angle1

步骤2:也将square1 ---> sqare10 = {center1, side1, 0} 旋转角度square2。获取新方块

- angle1

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

square30

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

  • 如果square30完全位于square30内,则原始square10完全位于原始square2

  • 否则,如果square1的边碰到square30的边,那么原始square10的顶点就碰到原始{{1 }}