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

Question

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

Answer 1

下面是如何给出一些鼠标点定义了“管”的实例。

用红线连接的红色点表示您的鼠标点。

绿色&蓝色线被计算为平行于红色鼠标线，偏移量为15像素。

绿色&蓝线形成你的管外。

，我会帮助你的数学，但你的造型管是由你。

需要一些三角准备好？

鉴于您的鼠标沿着多段线（由线段连接的一系列点）移动。您的鼠标点是图中的红线。

在每个点上，计算垂直于该点的两点并在该点的任一侧。 当你连接这些垂直点时，它们成为你的“管”的两侧。这些是鼠标线两侧的绿色&蓝线。

如何：

使用Math.atan2来计算斜率的值[X1，Y1]和[X2，Y2]之间的角度。

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

使用Math.cos/Math.sin找到2个垂直[X1，Y1]

// 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); 

一个边缘问题必须解决：如果倾斜角度在水平或垂直，余弦/正弦计算不起作用。相反，只需在点上添加/减去偏移长度。

数学部分完成！

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

祝您的项目顺利！