我想绘制一个管道图像，如绘制一条跟随鼠标光标的线

Question

我想绘制一个管道图像（下图），就像绘制一条线，跟随鼠标光标。当我按下左键，并移动鼠标光标时，管道图像绘制到光标位置（如bessel曲线） 。我怎样才能做到这一点？谢谢！

Answer 1

这是一个如何在给定鼠标点的情况下定义“管”的示例。

红线连接的红点代表你的鼠标点。

绿色＆amp;蓝线计算为与红色鼠标线平行，偏移量为15像素。

绿色＆amp;蓝色的线条形成了你的管外。

我会帮助你完成数学计算，但造型你的管子取决于你。

需要一些三角函数......准备好了吗？

假设您的鼠标沿折线移动（一系列由线段连接的点）。您的鼠标点是插图中的红线。

在每个点处，计算垂直于该点和该点两侧的2个点。 连接这些垂直点时，它们会成为“管”的两侧。这些是绿色＆amp;鼠标线两侧的蓝线。

如何：

使用Math.atan2计算[x1，y1]和[x2，y2]之间的斜率角度。

var dx=x2-x1;
var dy=y2-y1;
var originalAngle=Math.atan2(dy,dx);

使用Math.cos / Math.sin找到垂直于[x1，y1]

的2个点

// a perpendicular angle is always 90 degrees different
// from the angle of the original line.
// (90 degrees == Math.PI/2 radians)
// let's subtract 90 degrees 

var perpendicularAngle=originalAngle-Math.PI/2;

// let's get a perpendicular point that's 
// 15 pixels away from [x1,y1]

var offsetLength=15;

// use cosine and sine to calculate that perpendicular point

var perpX1=x1+offsetLength*Math.cos(perpendicularAngle);
var perpY1=y1+offsetLength*Math.sin(perpendicularAngle);

// repeat to get the opposite perpendicular point
// This time add 90 degrees to the original angle.

var perpendicularAngle=originalAngle+Math.PI/2;
var perpX2=x1+offsetLength*Math.cos(perpendicularAngle);
var perpY2=y1+offsetLength*Math.sin(perpendicularAngle);

您必须解决的一个边缘问题：如果斜率角度为水平或垂直，则余弦/正弦值计算将不起作用。相反，只需添加/减去偏移长度即可。

数学部分完成了！

现在只需根据需要设置数据点的样式。也许连接鼠标线两侧的垂直点以形成管的两侧。应用一些半透明填充以允许背景显示。无论您的设计需要什么。

祝你的项目好运！