shuhelohelo’s blog

Xamarin.Forms多めです.

Xamarin.Forms: ShapeのPath

Shapesの機能を使うにはXamarin.Forms 4.7以上にします.

[Xamarin.Forms] Tips and tricks working with Shapesjaviersuarezruiz.wordpress.com

ツールで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="...."の中身の部分を以下のようにPathDataプロパティに貼り付ける.

        <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" />

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

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>

実行するといかのように,表示される.先端と末尾が先で繋がれる.

f:id:shuhelohelo:20200630212956p:plain

詳しくはこちら.

[Xamarin.Forms] Shapesjaviersuarezruiz.wordpress.com

こんなこともできるようだ.

[Xamarin.Forms] Tips and tricks working with&nbsp;Shapesjaviersuarezruiz.wordpress.com

FluentUIアイコンのリポジトリ

アイコンはSVGで,中でPathが使われている. これはShapeで使える?まだttfは提供されていない.

github.com

さて,このアイコンのリストを見てみる.

github.com

f:id:shuhelohelo:20200630231234p:plain

この中から一つ,今回は一番上のアイコンを選択する.

このアイコンはSVG形式で,アイコンをクリックしてからページのソースを表示させると,SVGファイルの中身が表示される.

f:id:shuhelohelo:20200630231438p:plain

中にはPathがあって,そこにはd="..."という属性がある.

これを先程と同じようにXamarin.Formsの方のPathのDataプロパティに指定すると,以下のようにアイコンが表示される.

f:id:shuhelohelo:20200630231718p:plain

しかしながら,これは1.5倍に拡大してある.大きさを指定などはできないようなので,Scaleなどで拡大する必要がある.

FlaticonはSVG形式のアイコンをダウンロードできるサイト

www.flaticon.com

SVGをダウンロードしてPathの中のデータを利用すればいいと思う.

ソースコード

github.com