javascript - 计算直线同一斜率上的点
问题描述
我有几个点,需要确保同一斜坡上的点的长度应该只有 100 即;从同一方向的点 1 到点 2。
http://jsfiddle.net/xpvt214o/440613/
这是绘制箭头的代码
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.fillStyle="#FF0000";
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], 90, 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 */
解决方案
推荐阅读
- point-cloud-library - PCL 增量注册云
- python - 如果被 TKINTER 复选按钮选中,则从列表中提取一个值
- python - 如何使用 IB API 或 ib_insync 为 Interactive 代理设置错误处理程序?Python
- node.js - 带有来自请求的附加数据的 NODE GridFStorage 并不总是显示
- c - Malloc 使用的内存比指定的多?
- nodes - Chainlink 作业没有返回值
- go - 为什么第二个通道没有从前一个通道接收数据
- python-3.x - 如何缩短这些重复的 while/try/except/else 输入块?
- variables - Nginx 随机变量
- laravel - 获取结果后如何对 Eloquent 集合进行排序?