Javascript 使用JS计算两个矩形节点之间的直线交点偏移
我不喜欢问其他人这样的问题,但我不是一个三角专家,我需要一些帮助来计算直线相交的位置 使用Javascript和一组具有已知宽度和高度的已知矩形节点(节点的x和y位置表示每个节点的中心),我想计算线的起点和终点的线偏移,以便线只接触节点的边缘Javascript 使用JS计算两个矩形节点之间的直线交点偏移,javascript,math,trigonometry,Javascript,Math,Trigonometry,我不喜欢问其他人这样的问题,但我不是一个三角专家,我需要一些帮助来计算直线相交的位置 使用Javascript和一组具有已知宽度和高度的已知矩形节点(节点的x和y位置表示每个节点的中心),我想计算线的起点和终点的线偏移,以便线只接触节点的边缘 [_____]---->[_____] 上面的ascii图显示了两个矩形节点,节点之间有一个箭头。箭头在起点或终点都不与节点相交。假设直线总是水平或垂直的,这很容易计算,但是如果直线成一定角度,那么我仍然希望直线只接触边缘 假设下面的ascii艺术
[_____]---->[_____]
上面的ascii图显示了两个矩形节点,节点之间有一个箭头。箭头在起点或终点都不与节点相交。假设直线总是水平或垂直的,这很容易计算,但是如果直线成一定角度,那么我仍然希望直线只接触边缘
假设下面的ascii艺术有一个箭头指向目标节点(由管道符号表示)
已知变量:
- 资料来源(1):{x,y,w,h}
- 目标(2):{x,y,w,h}
- 线的θ(数学atan(y2-y1,x2-x1))
- 源节点上的交点
- 目标节点上的交点
{
sourceIntersect: {x, y},
targetIntersect: {x, y}
}
我发现有一个工具可以计算两条线的交点。如果我将矩形视为一组4条直线,我可以使用line intersect npm项目来获取其中一条直线的交点。在下面的SO问题中找到了解决方案 这是我的代码示例:
// first, get the sizes of the element.
// here we use getBoundingClientRect for an SVG
const clientRect = svgRectElement.getBoundingClientRect();
// extract the width and height
const w = clientRect.width;
const h = clientRect.height;
// trg represents the target point from the element above
// the x and y for trg relate to the center of the element
const top = trg.y - h / 2;
const bottom = trg.y + h / 2;
const left = trg.x - w / 2;
const right = trg.x + w / 2;
// a line extends from src{x,y} to trg{x,y} at the center of both rectangles
// another line extends from left to right at the top of the rectangle
const topIntersect = lineIntersect.checkIntersection(src.x, src.y, trg.x, trg.y, left, top, right, top);
// another line extends from top to bottom at the right of the rectangle
const rightIntersect = lineIntersect.checkIntersection(src.x, src.y, trg.x, trg.y, right, top, right, bottom);
// another line extends from left to right at the bottom of the rectangle
const bottomIntersect = lineIntersect.checkIntersection(src.x, src.y, trg.x, trg.y, left, bottom, right, bottom);
// another line extends from top to bottom at the left of the rectangle
const leftIntersect = lineIntersect.checkIntersection(src.x, src.y, trg.x, trg.y, left, top, left, bottom);
// only one of the intersect variables above will have a value
if (topIntersect.type !== 'none' && topIntersect.point != null) {
// topIntersect.point is the x,y of the line intersection with the top of the rectangle
} else if (rightIntersect.type !== 'none' && rightIntersect.point != null) {
// rightIntersect.point is the x,y of the line intersection with the right of the rectangle
} else if (bottomIntersect.type !== 'none' && bottomIntersect.point != null) {
// bottomIntersect.point is the x,y of the line intersection with the bottom of the rectangle
} else if (leftIntersect.type !== 'none' && leftIntersect.point != null) {
// leftIntersect.point is the x,y of the line intersection with the left of the rectangle
}
为了得到源节点的交点,我将把它作为
trg
参数传递给我的函数,而目标节点将表示src
参数,本质上诱使系统认为这条线是向后画的。这将提供源节点的交点,该交点在上面的变量trg
中表示。您需要知道直线的位置(直线上的点)…检查如何计算直线和点之间的最小距离,有很多方法。然后,由于您知道箭头的起点和终点位置,因此可以计算(距离>公差还是距离)
// first, get the sizes of the element.
// here we use getBoundingClientRect for an SVG
const clientRect = svgRectElement.getBoundingClientRect();
// extract the width and height
const w = clientRect.width;
const h = clientRect.height;
// trg represents the target point from the element above
// the x and y for trg relate to the center of the element
const top = trg.y - h / 2;
const bottom = trg.y + h / 2;
const left = trg.x - w / 2;
const right = trg.x + w / 2;
// a line extends from src{x,y} to trg{x,y} at the center of both rectangles
// another line extends from left to right at the top of the rectangle
const topIntersect = lineIntersect.checkIntersection(src.x, src.y, trg.x, trg.y, left, top, right, top);
// another line extends from top to bottom at the right of the rectangle
const rightIntersect = lineIntersect.checkIntersection(src.x, src.y, trg.x, trg.y, right, top, right, bottom);
// another line extends from left to right at the bottom of the rectangle
const bottomIntersect = lineIntersect.checkIntersection(src.x, src.y, trg.x, trg.y, left, bottom, right, bottom);
// another line extends from top to bottom at the left of the rectangle
const leftIntersect = lineIntersect.checkIntersection(src.x, src.y, trg.x, trg.y, left, top, left, bottom);
// only one of the intersect variables above will have a value
if (topIntersect.type !== 'none' && topIntersect.point != null) {
// topIntersect.point is the x,y of the line intersection with the top of the rectangle
} else if (rightIntersect.type !== 'none' && rightIntersect.point != null) {
// rightIntersect.point is the x,y of the line intersection with the right of the rectangle
} else if (bottomIntersect.type !== 'none' && bottomIntersect.point != null) {
// bottomIntersect.point is the x,y of the line intersection with the bottom of the rectangle
} else if (leftIntersect.type !== 'none' && leftIntersect.point != null) {
// leftIntersect.point is the x,y of the line intersection with the left of the rectangle
}