2016-09-02 149 views
0

我正在開發一款遊戲。用戶通過手指在屏幕上繪製曲線,然後獲得用戶觸摸點。如何繪製用戶觸摸點之間的平滑曲線?

我想繪製這些點之間的曲線。它們分散,當我使用畫布並在它們之間畫線時,結果不是一條光滑的曲線。

我正在尋找一些方法來繪製通過這些點的平滑曲線(也許通過修改或刪除一些不同於其他趨勢的點)。

任何人都可以幫助我嗎?

在這裏我想補充一個picture來說明我的意思

+0

[Bézier曲線](https://en.wikipedia.org/wiki/B%C3%A9zier_curve)。看看它,有足夠的可用資源。移動或刪除「不適合」的點本身就是一門科學,需要對點進行相當多的統計分析......這可能不值得在這個階段遇到麻煩。 – ppeterka

+0

@ppeterka謝謝,但它不能幫助我,我的遊戲需要繪製完全用戶的觸摸路徑。 – MehDi

+0

瞭解[樣條](https://www.particleincell.com/2012/bezier-splines/),它使用一組貝塞爾曲線來連接一組點。如果你從很多點開始,你的曲線是鋸齒狀的,那麼你可以犧牲幾個點並應用[路徑簡化算法](http://mourner.github.io/simplify-js/)。 – markE

回答

0

當我從Adobe Photoshop和Illustrator,越點你添加了解到,鋸齒狀的圖像看起來。繪圖時,您可以跳過其他任何點或其他東西。如果用戶快速移動,這可能會提供不準確的圖紙,因此您可以檢查跳過的點是否接近或遠離。

final int len = pointsX.length, far = 50; 
for (int i = 0; i < len; i++) 
{ 
    if (i % 2 == 0) //If even, draw 
    { 
     //Draw code 
    } 
    else if (Math.abs(pointsX[i] - pointsX[i-1]) > far || Math.abs(pointsY[i] - pointsY[i-1]) > far) 
    { //If the index is odd, check if the distance from the current to the last point is far. 
     //If it is far, draw. If not far, skip the draw, so it doesn't appear as jagged. 
     //Draw code 
    } 
} 
+0

謝謝,過去我也有過同樣的想法,每兩個跳過一個點,並沒有一個好的結果。但是檢查兩點的距離然後確定是否是skipp,似乎是一個好主意,我會稍後再嘗試,並告知結果。可能在其他解決方案旁邊使用這種方法是很好的:)再次感謝。(對不起,英語不好) – MehDi

+0

哦,不,它並沒有幫助我真的需要修改鋸齒狀的點,不過謝謝 – MehDi