基本上我想繪製一個多邊形,但我希望邊緣看起來柔軟而不是硬。由於多邊形的形狀很重要,因此邊緣必須穿過這些點。如何在一組點上畫一條閉合曲線?
我發現單調三次樣條曲線對於開放曲線(即不包圍自身的曲線)是準確的,但我發現算法預先計算了0和N.我可以以某種方式將它們更改爲使用閉合曲線工作?
我正在JavaScript中實現這一點,但僞代碼也是如此。
基本上我想繪製一個多邊形,但我希望邊緣看起來柔軟而不是硬。由於多邊形的形狀很重要,因此邊緣必須穿過這些點。如何在一組點上畫一條閉合曲線?
我發現單調三次樣條曲線對於開放曲線(即不包圍自身的曲線)是準確的,但我發現算法預先計算了0和N.我可以以某種方式將它們更改爲使用閉合曲線工作?
我正在JavaScript中實現這一點,但僞代碼也是如此。
There is an easy method(由Maxim Shemanarev開發)構建(通常)在一組點上設置好看的閉合貝塞爾曲線。例如:
算法中的關鍵時刻:
和示例代碼:
// Assume we need to calculate the control
// points between (x1,y1) and (x2,y2).
// Then x0,y0 - the previous vertex,
// x3,y3 - the next one.
double xc1 = (x0 + x1)/2.0;
double yc1 = (y0 + y1)/2.0;
double xc2 = (x1 + x2)/2.0;
double yc2 = (y1 + y2)/2.0;
double xc3 = (x2 + x3)/2.0;
double yc3 = (y2 + y3)/2.0;
double len1 = sqrt((x1-x0) * (x1-x0) + (y1-y0) * (y1-y0));
double len2 = sqrt((x2-x1) * (x2-x1) + (y2-y1) * (y2-y1));
double len3 = sqrt((x3-x2) * (x3-x2) + (y3-y2) * (y3-y2));
double k1 = len1/(len1 + len2);
double k2 = len2/(len2 + len3);
double xm1 = xc1 + (xc2 - xc1) * k1;
double ym1 = yc1 + (yc2 - yc1) * k1;
double xm2 = xc2 + (xc3 - xc2) * k2;
double ym2 = yc2 + (yc3 - yc2) * k2;
// Resulting control points. Here smooth_value is mentioned
// above coefficient K whose value should be in range [0...1].
ctrl1_x = xm1 + (xc2 - xm1) * smooth_value + x1 - xm1;
ctrl1_y = ym1 + (yc2 - ym1) * smooth_value + y1 - ym1;
ctrl2_x = xm2 + (xc2 - xm2) * smooth_value + x2 - xm2;
ctrl2_y = ym2 + (yc2 - ym2) * smooth_value + y2 - ym2;
爲什麼不在你的答案中詳細說明這個簡單的方法?如此,答案的價值完全取決於該URL的頁面沒有被移除或移動。 –
@Asad是的,這很有道理 – MBo
謝謝! +1爲一個偉大的答案。 –
你的意思是在畫布上? –
沒什麼實際意義,因爲我只需要弄清楚座標。但是,是的。如果您有解決方案,SVG也可以,在這種情況下,我可以將其轉換爲畫布。 – Blixt
「邊緣顯得柔和」你的意思是「頂點看起來柔軟」? –