ツールでSVGを描いてShapeで使う

www.youtube.com

Method Draw

作図して,それをSVGで出力できる.

editor.method.ac

f:id:shuhelohelo:20200630210743p:plain

<svg width="580" height="400" xmlns="http://www.w3.org/2000/svg">
 <!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->
 <g>
  <title>background</title>
  <rect fill="#fff" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
  <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
   <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/>
  </g>
 </g>
 <g>
  <title>Layer 1</title>
  <path id="svg_1" d="m146.5,258.11458c121,-94 141,-5 140.5,-5.11458c0.5,0.11458 155.5,-43.88542 155,-44c0.5,0.11458 -39.5,-98.88542 -40,-99c0.5,0.11458 78.5,102.11458 78,102c0.5,0.11458 -240.5,160.11458 -219.5,7.11458c21,-153 -94,-264 21,-153c115,111 31,221 115,111c84,-110 85,-66 84.5,-66.11458c0.5,0.11458 19.5,-47.88542 19,-48" stroke-width="1.5" stroke="#000" fill="#fff"/>
  <path id="svg_2" d="m142.99844,126.92167l6.27931,0l0,-8.92323l6.44138,0l0,8.92323l6.27931,0l0,9.15354l-6.27931,0l0,8.92323l-6.44138,0l0,-8.92323l-6.27931,0l0,-9.15354z" stroke-width="1.5" stroke="#000" fill="#fff"/>
 </g>
</svg>

これのd="...."の中身の部分を以下のようにPathのDataプロパティに貼り付ける.

        <Path
            Aspect="Fill"
            Data="m146.5,258.11458c121,-94 141,-5 140.5,-5.11458c0.5,0.11458 155.5,-43.88542 155,-44c0.5,0.11458 -39.5,-98.88542 -40,-99c0.5,0.11458 78.5,102.11458 78,102c0.5,0.11458 -240.5,160.11458 -219.5,7.11458c21,-153 -94,-264 21,-153c115,111 31,221 115,111c84,-110 85,-66 84.5,-66.11458c0.5,0.11458 19.5,-47.88542 19,-48"
            Fill="#007fff"
            Stroke="#007fff" />

FillとStrokeはそれぞれ塗りつぶしの色と線の色.

Shapesの機能はExperimentalなので,App.xaml.csにDevice.SetFlags(new string[] { "Shapes_Experimental" });を追加する.

        public App()
        {
            InitializeComponent();

            Device.SetFlags(new string[] { "Shapes_Experimental" });

            MainPage = new MainPage();
        }

Viewのほうに以下のようにPathにする.

    <StackLayout>
        <!--  Place new controls here  -->
        <Label
            HorizontalOptions="Center"
            Text="Welcome to Xamarin.Forms!"
            VerticalOptions="CenterAndExpand" />
        <Path
            Aspect="Fill"
            Data="m146.5,258.11458c121,-94 141,-5 140.5,-5.11458c0.5,0.11458 155.5,-43.88542 155,-44c0.5,0.11458 -39.5,-98.88542 -40,-99c0.5,0.11458 78.5,102.11458 78,102c0.5,0.11458 -240.5,160.11458 -219.5,7.11458c21,-153 -94,-264 21,-153c115,111 31,221 115,111c84,-110 85,-66 84.5,-66.11458c0.5,0.11458 19.5,-47.88542 19,-48"
            Fill="#007fff"
            Stroke="#ff7000" />
    </StackLayout>