大部分情况下,在2D坐标系中,这一切都可以通过基本的代数运算完成。您需要确定原始线的中心点和斜率,从这两个信息中,您可以轻松绘制垂直点。
查找中心点
要找到两个点之间的中心点,您应该能够获取相应x和y坐标之间的差异并除以二,然后将其加到起始值中:
function getCenterPoint(a, b) {
return { x: (b.x - a.x) / 2 + a.x, y: (b.y - a.y) / 2 + a.y };
}
var p1 = { x: 10, y: 10 }
var p2 = { x: 90, y: 40 }
var center = getCenterPoint(pt1, pt2);
寻找斜率
你可以通过上升与下降的比例来计算线段的斜率:
function getSlope(a, b) {
return (b.y - a.y) / (b.x - a.x);
}
var slope = getSlope(p1, p2);
为了获得垂直斜率,您可以将其取反并倒置:
var perpendicularSlope = -(1 / slope)
使用斜率绘制点
现在您可以在垂直于中心点的线上绘制任何点。在您的示例中,要上升到您的直线上,您需要使用一个比中心点小的x值,要下降到您的直线下方,您需要使用比中心点大的x值。要确定y值,您需要将斜率乘以x值。
var pAbove = { x: center.x - 10, y: (center.x - 10) * perpendicularSlope };
var pBelow = { x: center.x + 10, y: (center.x + 10) * perpendicularSlope };