我想繪製一條管線圖像，就像繪製一條跟隨鼠標光標的線條

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

一個邊緣問題必須解決：如果傾斜角度在水平或垂直，餘弦/正弦計算不起作用。相反，只需在點上添加/減去偏移長度。

數學部分完成！

現在只需按照您的需要設計數據點。也許連接鼠標線兩側的垂直點，形成管子的兩側。應用一些半透明填充以允許背景顯示。無論您的設計需要什麼。

祝您的項目順利！