获取线点的箭头坐标
获取线点的箭头坐标
提问于 2018-07-17 04:12:21
假设我有2分。
QPoint(100,100) QPoint(200,200)
现在，我需要在行QPoint(200,200)的末尾绘制一个指向的箭头。
由于这条线是倾斜的，我如何获得箭头坐标的点？箭头应该如下图所示。
由于这是一个更一般的问题，我在pyqt5和css上加标签。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-17 05:37:07
您需要计算直线的坡度，这将使您能够在距离端点给定距离的直线上找到一个点。然后，可以构建一条与通过该点的原始直线垂直的新直线。箭头的两端应位于距原始线一定距离的那条线上。展示起来容易，解释起来难：
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>
可以使用distance和length更改箭头的形状
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51369452
复制相关文章
相似问题