Silverlight BezierSegment

最近打算將照片製作成拼圖，其中拼圖中的切割區線，必須使用到 Bezier 曲線。下面這個網頁，可以得到 BezierSegment 的使用範例。
順便一提，這個範例蠻有趣，以逐漸上升的水量，以及波浪動畫來呈現百分比，這讓我聯想到 loading 或遊戲中生命值的表現方式。

BezierSegment 以前一個 segment 為起點，以 Point3 為終點，而 Point1 與 Point2 則為曲度的控制點。

[Reference]
Animating A Silverlight BezierSegment: http://kemmis.info/blog/archive/2009/05/16/animating-a-silverlight-beziersegment.aspx

Create a Path at Rutime

我需要利用 Silverlight 設計裁切照片的工具，
例如，讓 user 框選照片中的大頭，裁切下來，並加以應用。
因此，在 runtime 建立一組 path，
並隨著 user 的 click 新增 node，
是一項重要的流程。

以下是我利用 path 畫出一個正方形的範例，
並以 canvas 為其父物件。為了讓範例簡化，
click、clip、image 等部分的處理，並沒有加入範例中。

Path path = new Path();

PathGeometry pathGeometry = new PathGeometry();
path.Data = pathGeometry;
pathGeometry.Figures = new PathFigureCollection();

PathFigure figur = new PathFigure();
pathGeometry.Figures.Add(figur);

figur.StartPoint = new Point(0, 0);

LineSegment seg1 = new LineSegment();
seg1.Point = new Point(100, 0);
figur.Segments.Add(seg1);

LineSegment seg2 = new LineSegment();
seg2.Point = new Point(100, 100);
figur.Segments.Add(seg2);

LineSegment seg3 = new LineSegment();
seg3.Point = new Point(0, 100);
figur.Segments.Add(seg3);

path.Fill = new SolidColorBrush(Colors.Blue);
Canvas.SetTop(path, 200);
Canvas.SetLeft(path, 300);

Canvas canvas = new Canvas();
canvas.Background = new SolidColorBrush(Colors.DarkGray);
canvas.Width = 50;
canvas.Height = 50;
canvas.HorizontalAlignment = HorizontalAlignment.Left;
canvas.VerticalAlignment = VerticalAlignment.Top;
canvas.Children.Add(path);

this.LayoutRoot.Children.Add(canvas);

[refernece]
How to draw a path at runtime