2016/08/06

簡単! Path作成

xamlで標準で使えるデータとしてPathがあります
ベクターデータなので画像よりサイズが小さいですし 拡大しても荒れません
作成チュートリアルとしてEnterキーを作ってみます

Blend for Visual Studio 2015

Visual Studio Community 2015をインストールすると一緒に付いてくる Blend for Visual Studio 2015で作成します

コルタナさんで検索しBlendを起動して 新規WPFプロジェクトを作ります

Canvas


アセット-コントロール-パネルからCanvasをドラッグ&ドロップします

Canvasを右クリックしてレイアウト-すべてリセット

Rectangle

アセット-図形-RectangleをCanvasにドラッグ&ドロップ

Rectangleを選択してプロパティウィンドウから RadiusX,Yをマウスホイールで5に変更して角を丸めます

Rectangleをコピー&ペーストで4つ作ります

Rectangleをサイズ調整し↑のように重ねます

結合

重ねたRectangleをCtrlクリックで両方選択して 右クリック-結合-合算でPathにします

もうひとつ↑のように合算します

最後のRectangleを↑のように配置して今度は減算します
位置がずれるとガタガタになるのでマウスホイールで拡大したり RectangleのFillを無しにしたりしてしっかり合わせてください
減算の時は抜きたい方(左下のRectangle)を先に選択し 抜かれる方(右上のPath)を後に選択します

ペンツール

ペンツールを選択するとPathのコントロールポイントが見えるようになります
ドローソフトに慣れている方はベジェ曲線等で自由に描いてみてください

合算で出来てしまった不要なポイントをクリックして削除します

xaml

デザインからXAMLに切り替えます(↑はXamlStylerでFormat XAMLをした後です)

以上で終了です スキンにコピペして使ってみましょう
 <Path Width="92"
            Height="127"
            Data="M5.5,0.5 L86.5,0.5 C89.26,0.5 91.5,2.74 91.5,5.5 L91.5,32.5 91.5,121.5
            C91.5,124.26 89.26,126.5 86.5,126.5 L21.5,126.5 C18.74,126.5 16.5,124.26   
            16.5,121.5 L16.5,64.5 C16.5,61.74 14.26,59.5 11.5,59.5 L5.5,59.5 C2.74,59.5  
            0.5,57.26 0.5,54.5 L0.5,5.5 C0.5,2.74 2.74,0.5 5.5,0.5 z"
            Fill="#FFF4F4F5"
            Stretch="Fill"
            Stroke="Black" />
数値に微妙な誤差が出ていてちょっと気持ち悪いので 小数点第3位を四捨五入してすっきりさせました

絵心があればイラスト等も描けるのですが 私は無いのでこれで精一杯ですw

0 件のコメント :

コメントを投稿