获取线点箭头的坐标

时间:2018-07-16 20:12:21

标签: vector

考虑我有2分。

QPoint(100,100) QPoint(200,200)

现在,我需要在QPoint(200,200)行的末尾绘制一个尖的箭头。

由于直线倾斜,如何获得箭头坐标的点?箭头应如下所示。

enter image description here

这是一个更普遍的问题,我在pyqt5和css上进行了标记。

2 个答案:

答案 0 :(得分:0)

如果我们查看需要的点(需要U和D,给定S和E):

      U
     /|
   /  |    
S---------------------E
   \  |
     \|
      D

实际上,我们必须从S转到E,然后再旋转90度并走相同的长度。如果我们采用S和E之间的方向(表示为矢量):

d = E - S

然后我们可以获得往回走的距离:

b = -d / 4

然后以90度角向上走,我们只交换x和y,向下走我们只取负值:

u = [b.y, b.x]
d = -u

所以我们最终可以得到以下几点:

U = S + b + u
D = S + b + d

(上面的代码是您想要的一般解决方案的伪代码)

答案 1 :(得分:0)

您需要计算直线的斜率,这将使您能够在直线上找到距端点给定距离的点。然后,您可以构建一条垂直于穿过该点的原始线的新线。箭头的末端应位于与原始线相距给定距离的那条线上。显示起来比解释容易:

function draw(point1, point2, distance, length) {
  // slope is dx/dy
  let dx = point2[0] - point1[0]
  let dy = point2[1] - point1[1]
  let v_norm = Math.sqrt(dx ** 2 + dy ** 2)

  // point on line at distance
  let point_on_line = [point2[0] - distance * dx / v_norm, point2[1] - distance * dy / v_norm]

  // endpoints of arrows at length above point (the distance from the original line
  let point_below = [point_on_line[0] - length * -dy / v_norm, point_on_line[1] - length * dx / v_norm, ]
  let point_above = [point_on_line[0] + length * -dy / v_norm, point_on_line[1] + length * dx / v_norm, ]

  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');

  ctx.beginPath();
  ctx.moveTo(...point1);
  ctx.lineTo(...point2);
  ctx.moveTo(...point_above)
  ctx.lineTo(...point2)
  ctx.lineTo(...point_below)
  ctx.stroke();
}

draw([100, 100], [200, 150], 20, 10)
draw([100, 100], [300, 150], 20, 10)
draw([100, 100], [150, 10], 20, 10)
draw([100, 100], [90, 150], 20, 10)
draw([100, 100], [200, 100], 20, 10)
draw([100, 100], [5, 10], 20, 10)
<canvas id="canvas" width='500' height='500'></canvas>

您可以使用distancelength

更改箭头的形状。