如何在WPF中繪製Bezier曲線的一部分？

我有要求繪製小彎箭頭。我可以計算出箭頭的角度，然後我將使用Beziers來定義路徑段。但是，我真正想要做的是計算開始和結束之間的不可見曲線路徑，並且只在開始之後和結束之前從小距離開始對路徑進行筆劃。如何在WPF中繪製Bezier曲線的一部分？

這會在開始點和結束點之間的任何對象之間留下適當的間隙。有什麼建議麼？

來源

2017-04-10 deadlyvices

中間有一個透明顏色的漸變怎麼樣？ – DrRiisTab

@DrRiisTab這可能會使箭頭定位變得棘手。 –

@DrRiisTab：謝謝你的建議。這是可能的，因爲你可以調用一個方法來計算沿線的x％點的切線和x，y座標。我只是覺得定製筆來衝擊那部分是非常困難的。 – deadlyvices

我想我可能已經碰到了一個可能的解決方案，在很多頭部劃傷之後。假設你有一條貝塞爾曲線A-B-C-D，其中B是控制點，A是起點和終點。而你要開始和結束從A對峙距離X和d：

生成初始貝塞爾
呼叫GetFlattenedPathGeometry將其轉換成一系列小段
總結得到Bezier的長度並將其分成X，從頭到尾得到分數長度F
請致電原始Bezier上的PathGeometry.GetPointAtFractionLength，傳入F和1-F。這將產生一個開始/結束點和縮短的貝塞爾
各端的切向量的開始/結束點加入到切向量得到相應的控制點
使用生成一個新的貝塞爾這些點應該脫離原來的起點和終點X

查看此方法的任何問題？

來源

2017-04-10 15:49:03 deadlyvices

有趣。有任何實施的代碼和/或圖像來表明這一點？ –

是的，對於遲到的回覆感到抱歉。我還沒有任何代碼，但是當我接近它時我會發布一些代碼。 – deadlyvices

箭頭通常沒有瘋狂地弄亂曲線，它們有非常平滑的曲線，靠近端點的t值表現爲純立方體（因爲貝塞爾函數在起始座標處由（1-t）³控制，並在年底t³座標），所以附近的終點，你可以「guestimate」中的「T」的值，你需要使用立方根插上拿到附近需要一個座標：

// let's say we want "10% away from the end" 
desiredDistance = 0.9; 

// then the guestimate for the "t" value is simply the cube root of 0.9 
probablyT = Math.pow(desiredDistance, 1/3); 

// and the point we want to cut at is at that "t" value 
cutPoint = get(probablyT, pts); 

// and we can split up the curve into two segments at that "t" value 
curves = split(probablyT, pts); 

// and then keep the segment we need for the arrow 
arrowcurve = curves[0];

見http://jsbin.com/dovodibaze/edit?js,output這近似於接近終點的距離（以及這清楚地僅在您猜測的終點附近是如何工作的=）

使用probablyT這個值，您可以分割您的原始曲線，繪製您從該分割中獲得的「第一條」曲線（覆蓋原始t = 0到t =近端段），然後在原始終點。

來源

2017-04-10 17:28:59

在C＃中獲得了一個不是JavaScript的版本？我正在使用WPF。 – deadlyvices

我不這樣做，但我完全希望你能夠閱讀這麼簡單的代碼=）（如果你熟悉WPF API，那麼WPF-i-fy應該不會太多工作，在jsbin中的特殊調用是繪製一條曲線和一些圓圈的畫布，這不應該太混亂） –

我沒有更新jsbin，有些點充當「真正的間隔」定位點，所以你可以玩計算機'大概'，並找到最適合您的需求的東西。我實際上解釋了這個錯誤，因爲它比純粹的多維數據集根有更多的工作，然後我們再次編程，而不是數學，所以「如果你90％，使用80％的立方體根」，就編程而言，即使沒有一個數學基礎，這解釋了爲什麼> _>; –

如何在WPF中繪製Bezier曲線的一部分？

回答

相關問題