Path を C# で構成する


環境: WIndows Phone 7 + Visual Studio 2010

WPF だと、Expression Blend などで次のように簡単に Path を自動生成してくれます。

<Path x:Name="path" Data="M183.66667,86.666667 C189.39235,102.51222 195.97031,115.69911 204.00303,124.34783 189.46184,124.37625 176.55191,127.63058 166.26051,130.07866 177.67961,136.62725 192.00787,141.50314 209.25719,141.39676 203.19164,149.57713 198.0335,156.49435 192.99912,166.33255 202.42621,162.74626 210.94614,156.64738 218.66605,148.33266 L222.66553,167.66588 C225.54016,165.52929 227.12504,154.35884 228.999,141.99936 234.06358,144.63928 238.15358,153.77991 241.33226,168.99921 L243.66592,167.99921 C241.1493,155.99855 236.78856,146.70538 230.66566,139.99937 241.69194,144.10578 251.73257,143.90948 260.99883,140.3327 255.36431,137.34626 248.38965,134.93892 240.33229,132.99941 250.52631,127.61701 259.03319,119.28195 265.66548,107.66621 L234.3321,118.99948 C236.99567,104.86417 236.63427,91.185053 232.99878,77.999712 226.74482,85.30016 221.8588,98.979918 218.33224,118.99948 209.59223,103.54312 197.83014,93.109381 183.66667,86.666667 z" Fill="red" Height="100" Stretch="Fill" Stroke="Red" RenderTransformOrigin="0.5,0.5"  Width="100" Margin="159,30,197,477">

Windows 環境だと、次のように PathGeometry.Parse でパースできるので、Expression Blend でデザインしたデータを C# で簡単に再利用することができます。

            const string PathData = “M248,64 C236.5247,64.625058 225.71435,67.192184 215.5,71.5 L207.5,95.5 191.5,79.5 C179.10929,77.102304 168.53048,80.027027 159.5,87.5 159.50162,99.540561 161.46431,108.60788 167.5,111.5 L183.5,119.5 159.5,135.5 C160.12292,156.23214 162.17492,169.92602 167.5,167.5 172.91066,172.67869 180.71148,173.07705 191.5,167.5 L207.5,151.5 C203.2411,162.05534 202.55968,170.46419 207.5,175.5 219.38597,184.51719 230.14356,187.65745 239.5,183.5 L255.5,167.5 C252.80927,155.47101 245.02601,144.74873 231.5,135.5 L263.5,143.5 C272.5318,139.39663 278.23003,131.78108 279.5,119.5 276.83333,114.16667 274.16667,108.83333 271.5,103.5 262.70483,100.69259 251.88845,100.91719 239.5,103.5 248.65115,105.75263 260.3255,80.446287 248,64 z”;
            var g = PathGeometry.Parse(PathData);

ところが、Windows Phone 環境だと、 Path.Parse が提供されていないのと、Object.Clone がないので、次のようにべたに書かざるを得なくなります。

private Path CreatePath()
{
    var pf = new PathFigure();
    pf.StartPoint = new Point(183.66667, 86.666667);
   
    var b1 = new BezierSegment(); // C189.39235,102.51222 195.97031,115.69911 204.00303,124.34783
    b1.Point1 = new Point(189.39235, 102.51222);
    b1.Point2 = new Point(195.97031, 115.69911);
    b1.Point3 = new Point(204.00303, 124.34783);
    pf.Segments.Add(b1);
    var b2 = new BezierSegment();  // 189.46184,124.37625 176.55191,127.63058 166.26051,130.07866
    b2.Point1 = new Point(189.46184, 124.37625);
    b2.Point2 = new Point(176.55191, 127.63058);
    b2.Point3 = new Point(166.26051, 130.07866);
    pf.Segments.Add(b2);
    var b3 = new BezierSegment();  // 177.67961,136.62725 192.00787,141.50314 209.25719,141.39676 
    b3.Point1 = new Point(177.67961, 136.62725);
    b3.Point2 = new Point(192.00787, 141.50314);
    b3.Point3 = new Point(209.25719, 141.39676);
    pf.Segments.Add(b3);
    var b4 = new BezierSegment();  // 203.19164,149.57713 198.0335,156.49435 192.99912,166.33255
    b4.Point1 = new Point(203.19164, 149.57713);
    b4.Point2 = new Point(198.0335, 156.49435);
    b4.Point3 = new Point(192.99912, 166.33255);
    pf.Segments.Add(b4);
    var b5 = new BezierSegment();  // 202.42621,162.74626 210.94614,156.64738 218.66605,148.33266
    b5.Point1 = new Point(202.42621, 162.74626);
    b5.Point2 = new Point(210.94614, 156.64738);
    b5.Point3 = new Point(218.66605, 148.33266);
    pf.Segments.Add(b5);

    // L222.66553,167.66588
    var l1 = new LineSegment();
    l1.Point = new Point(222.66553,167.66588 );
    pf.Segments.Add(l1);

    var b6 = new BezierSegment();  // C225.54016,165.52929 227.12504,154.35884 228.999,141.99936 
    b6.Point1 = new Point(225.54016, 165.52929);
    b6.Point2 = new Point(227.12504, 154.35884);
    b6.Point3 = new Point(228.999, 141.99936);
    pf.Segments.Add(b6);

    var b7 = new BezierSegment();  // 234.06358,144.63928 238.15358,153.77991 241.33226,168.99921 
    b7.Point1 = new Point(234.06358, 144.63928);
    b7.Point2 = new Point(238.15358, 153.77991);
    b7.Point3 = new Point(241.33226, 168.99921);
    pf.Segments.Add(b7);

    // L243.66592,167.99921
    var l2 = new LineSegment();
    l2.Point = new Point(243.66592, 167.99921);
    pf.Segments.Add(l2);

    var b8 = new BezierSegment();  // C241.1493,155.99855 236.78856,146.70538 230.66566,139.99937  
    b8.Point1 = new Point(241.1493, 155.99855);
    b8.Point2 = new Point(236.78856, 146.70538);
    b8.Point3 = new Point(230.66566, 139.99937);
    pf.Segments.Add(b8);

    var b9 = new BezierSegment();  // 241.69194,144.10578 251.73257,143.90948 260.99883,140.3327
    b9.Point1 = new Point(241.69194, 144.10578);
    b9.Point2 = new Point(251.73257, 143.90948);
    b9.Point3 = new Point(260.99883, 140.3327);
    pf.Segments.Add(b9);

    var b10 = new BezierSegment();  // 255.36431,137.34626 248.38965,134.93892 240.33229,132.99941 
    b10.Point1 = new Point(255.36431, 137.34626);
    b10.Point2 = new Point(248.38965, 134.93892);
    b10.Point3 = new Point(240.33229, 132.99941);
    pf.Segments.Add(b10);

    var b11 = new BezierSegment();  // 250.52631,127.61701 259.03319,119.28195 265.66548,107.66621  
    b11.Point1 = new Point(250.52631, 127.61701);
    b11.Point2 = new Point(259.03319, 119.28195);
    b11.Point3 = new Point(265.66548,107.66621);
    pf.Segments.Add(b11);

    // L234.3321,118.99948
    var l3 = new LineSegment();
    l3.Point = new Point(234.3321, 118.99948);
    pf.Segments.Add(l3);

    var b12 = new BezierSegment();  // C236.99567,104.86417 236.63427,91.185053 232.99878,77.999712      
    b12.Point1 = new Point(236.99567, 104.86417);
    b12.Point2 = new Point(236.63427, 91.185053);
    b12.Point3 = new Point(232.99878, 77.999712);
    pf.Segments.Add(b12);
    var b13 = new BezierSegment();  // 226.74482,85.30016 221.8588,98.979918 218.33224,118.99948
    b13.Point1 = new Point(226.74482, 85.30016);
    b13.Point2 = new Point(221.8588, 98.979918);
    b13.Point3 = new Point(218.33224, 118.99948);
    pf.Segments.Add(b13);
    var b14 = new BezierSegment();  // 209.59223,103.54312 197.83014,93.109381 183.66667,86.666667
    b14.Point1 = new Point(209.59223, 103.54312);
    b14.Point2 = new Point(197.83014, 93.109381);
    b14.Point3 = new Point(183.66667, 86.666667);
    pf.Segments.Add(b14);

    PathFigureCollection pfc = new PathFigureCollection();
    pfc.Add(pf);

    PathGeometry pg = new PathGeometry();
    pg.Figures = pfc;
    var path = new Path();
    path.RenderTransformOrigin = new Point(0.5, 0.5);
    path.StrokeThickness = 3;
    path.Stroke = new SolidColorBrush(Colors.Red);
    path.Width = 100;
    path.Height = 100;
    path.Fill = new SolidColorBrush(Colors.Orange);
    path.Data = pg;
    path.Stretch = Stretch.Fill;
    var ct = new CompositeTransform();
    path.RenderTransform = ct;

    return path;
}

赤いモミジが WPF、オレンジのモミジが C# で実装したものです。

image

Windows Phone では、システムの肥大化を防ぐために API を絞っていますが、Clone は削らないでほしかった・・・

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中


%d人のブロガーが「いいね」をつけました。