ホーム > Expression Blend > Expression Blend Tips

コンパスを描いてみよう

Expression Blend Tips
蜜葉 優@Silverlight Square[著], わにちゃん@ExpressionTech.jp[編集]
2011年5月15日 from Atelier:Mitsuba

はじめに

ちょっと画像作ってよー
f:id:c-mitsuba:20101206021548p:image

なんて、しばやんが甘えてくるので作ってみた。

まずは、ぱぱっとラフを描きました。

つぎに、Adobe Illustratorでちょっと丁寧に。

でもって、Expression Blendに流しこみます。

aiや、psdはインポートすると、xamlになります。

ちなみにテキストはパス化されてしまいますが、このへんは必要であればBlendで書きなおすといいと思います。

サイズと構造を調整

で、サイズと構造を調整。

こんなかんじ。
f:id:c-mitsuba:20101206021549p:image

すると、、、
f:id:c-mitsuba:20101206021550p:image

しばやんめっっ!

色を反転

というわけで、色をBlendで反転。

ふつーにプロパティパネルのFillとかをいじります。

すると、こんなかんじ。

ついでにWP7のプロジェクトに乗っけてみました。
f:id:c-mitsuba:20101206021551p:image

うん、いい感じですねー。

コンパスのパスデータ

せっかくなので、Canvasでくくったコンパスのパスデータを載せておきます。

これをGridなりなんなりに書くとコンパスが表示されます。

針と盤はCanvasで分けているので電子コンパスの情報とって回転させやすいと思います。

SilverlightとWP7では表示できますが、wpfは知りません。

それにしても、デザインが苦手とかやりたがらないプログラマと、xamlなんて全く読めない触れないデザイナが世の中にはいっぱいいるんだろうなぁ。

と思いつつ、うまく橋渡しできないかなぁーなんて思います。

compass.xaml

<Canvas x:Name="compass" d:LayoutOverrides="HorizontalAlignment" Width="420" Height="420">
	<Canvas x:Name="compass_base" Height="416" Canvas.Left="11" Canvas.Top="4" Width="396">
		<Path Data="F1M371.5986,295.8208C371.5986,304.5548,364.5176,311.6358,355.7846,311.6358C347.0496,311.6358,339.9686,304.5548,339.9686,295.8208C339.9686,287.0868,347.0496,280.0058,355.7846,280.0058C364.5176,280.0058,371.5986,287.0868,371.5986,295.8208" Fill="White" Height="43.643" Canvas.Left="175.954" Stretch="Fill" Width="43.642" UseLayoutRounding="False"/>
		<Path Data="M480.4922,438.9082C480.4922,509.1992,423.5112,566.1802,353.2202,566.1802C282.9292,566.1802,225.9472,509.1992,225.9472,438.9082C225.9472,368.6182,282.9292,311.6362,353.2202,311.6362C423.5112,311.6362,480.4922,368.6182,480.4922,438.9082z" Fill="Black" Height="396" StrokeStartLineCap="Flat" Stretch="Fill" StrokeEndLineCap="Flat" Stroke="White" StrokeThickness="32" StrokeMiterLimit="10" StrokeLineJoin="Miter" Canvas.Top="20.186" Width="396" UseLayoutRounding="False"/>
		<Path Data="F1M285.1729,438.9092L338.1809,423.8702L353.2199,370.8612L367.1299,424.9982L421.2669,438.9092L367.8809,453.5692L353.2199,506.9542L337.8059,454.3212z" Fill="White" Height="187.651" Canvas.Left="103.843" Stretch="Fill" Canvas.Top="124.028" Width="187.652" UseLayoutRounding="False"/>
		<Path Data="F1M318.0469,403.7373L353.2189,423.3623L388.3909,403.7373L367.5999,438.9093L388.3909,474.0803L353.2189,454.0643L318.0489,474.0803L337.2849,438.9083z" Fill="White" Height="96.585" Canvas.Left="149.327" Stretch="Fill" Canvas.Top="169.516" Width="96.586" UseLayoutRounding="False"/>
		<Canvas x:Name="TextBlock" Height="300" Canvas.Left="188" Canvas.Top="69" Width="20">
			<Path Data="F1M360.102575,347.103L356.2432,347.103L350.071325,335.94675L350.071325,347.103L346.39945,347.103L346.39945,331.103L351.321325,331.103L356.4307,340.274875L356.4307,331.103L360.102575,331.103L360.102575,347.103" Fill="#FFC9CACA" Height="16" Canvas.Left="2.331" Stretch="Fill" Canvas.Top="-11.5" Width="14" UseLayoutRounding="False"/>
			<Path Data="F1M352.85495,547.621875C351.6362,547.621875,350.558075,547.496875,349.6362,547.2625C348.6987,547.028125,347.839325,546.73125,347.04245,546.371875L347.04245,542.575L347.41745,542.575C348.214325,543.2625,349.089325,543.778125,350.058075,544.153125C351.026825,544.528125,351.964325,544.7,352.8862,544.7C353.10495,544.7,353.41745,544.684375,353.79245,544.621875C354.16745,544.575,354.464325,544.496875,354.6987,544.3875C354.97995,544.2625,355.214325,544.090625,355.401825,543.871875C355.589325,543.653125,355.6987,543.371875,355.6987,543.0125C355.6987,542.60625,355.526825,542.278125,355.214325,542.028125C354.901825,541.778125,354.526825,541.60625,354.089325,541.48125C353.54245,541.340625,352.964325,541.2,352.339325,541.075C351.714325,540.95,351.1362,540.79375,350.60495,540.60625C349.370575,540.16875,348.47995,539.590625,347.9487,538.840625C347.401825,538.10625,347.1362,537.184375,347.1362,536.059375C347.1362,534.575,347.7612,533.371875,349.04245,532.434375C350.308075,531.5125,351.8862,531.04375,353.79245,531.04375C354.72995,531.04375,355.683075,531.153125,356.620575,531.340625C357.558075,531.528125,358.41745,531.79375,359.16745,532.10625L359.16745,535.7625L358.808075,535.7625C358.214325,535.2625,357.47995,534.825,356.6362,534.48125C355.776825,534.1375,354.901825,533.95,353.995575,533.95C353.6362,533.95,353.3237,533.98125,353.04245,534.028125C352.7612,534.090625,352.47995,534.184375,352.16745,534.309375C351.91745,534.434375,351.6987,534.60625,351.5112,534.825C351.3237,535.059375,351.245575,535.309375,351.245575,535.590625C351.245575,535.996875,351.3862,536.325,351.683075,536.559375C351.964325,536.809375,352.526825,537.0125,353.35495,537.2C353.8862,537.325,354.41745,537.45,354.91745,537.559375C355.41745,537.684375,355.9487,537.840625,356.5112,538.028125C357.60495,538.434375,358.433075,538.98125,358.97995,539.653125C359.5112,540.340625,359.79245,541.23125,359.79245,542.325C359.79245,543.91875,359.16745,545.2,357.91745,546.16875C356.66745,547.1375,354.97995,547.621875,352.85495,547.621875L352.85495,547.621875" Fill="#FFC9CACA" Height="17" Canvas.Left="3.331" Stretch="Fill" Canvas.Top="288.943" Width="13" UseLayoutRounding="False"/>
		</Canvas>
		<Path Data="M353.2188,346.8564L353.2188,327.0224" Height="44.137" Canvas.Left="196.635" StrokeStartLineCap="Flat" Stretch="Fill" StrokeEndLineCap="Flat" Stroke="White" StrokeThickness="1" StrokeMiterLimit="10" StrokeLineJoin="Miter" Canvas.Top="47.643" Width="2.101" UseLayoutRounding="False"/>
		<Path Data="M417.8535,374.3477L431.8785,360.3227" Height="29.364" Canvas.Left="286.189" StrokeStartLineCap="Flat" Stretch="Fill" StrokeEndLineCap="Flat" Stroke="White" StrokeThickness="1" StrokeMiterLimit="10" StrokeLineJoin="Miter" Canvas.Top="100.096" Width="29.364" UseLayoutRounding="False"/>
		<Path Data="M445.4268,438.9092L465.2608,438.9092" Height="2.214" Canvas.Left="324.223" StrokeStartLineCap="Flat" Stretch="Fill" StrokeEndLineCap="Flat" Stroke="White" StrokeThickness="1" StrokeMiterLimit="10" StrokeLineJoin="Miter" Canvas.Top="216.766" Width="46.476" UseLayoutRounding="False"/>
		<Path Data="M418.0771,503.6807L432.1011,517.7047" Height="34.246" Canvas.Left="286.498" StrokeStartLineCap="Flat" Stretch="Fill" StrokeEndLineCap="Flat" Stroke="White" StrokeThickness="1" StrokeMiterLimit="10" StrokeLineJoin="Miter" Canvas.Top="306.567" Width="34.246" UseLayoutRounding="False"/>
		<Path Data="M353.2197,550.4814L353.2197,530.6474" Height="45.975" Canvas.Left="196.591" StrokeStartLineCap="Flat" Stretch="Fill" StrokeEndLineCap="Flat" Stroke="White" StrokeThickness="1" StrokeMiterLimit="10" StrokeLineJoin="Miter" Canvas.Top="343.764" Width="2.189" UseLayoutRounding="False"/>
		<Path Data="M274.3696,517.7412L288.3946,503.7162" Height="34.197" Canvas.Left="74.711" StrokeStartLineCap="Flat" Stretch="Fill" StrokeEndLineCap="Flat" Stroke="White" StrokeThickness="1" StrokeMiterLimit="10" StrokeLineJoin="Miter" Canvas.Top="306.616" Width="34.197" UseLayoutRounding="False"/>
		<Path Data="M241.0518,438.9072L260.8858,438.9072" Height="1.976" Canvas.Left="29.729" StrokeStartLineCap="Flat" Stretch="Fill" StrokeEndLineCap="Flat" Stroke="White" StrokeThickness="1" StrokeMiterLimit="10" StrokeLineJoin="Miter" Canvas.Top="216.882" Width="41.475" UseLayoutRounding="False"/>
		<Path Data="M288.228,374.2051L274.203,360.1801" Height="31.697" Canvas.Left="76.982" StrokeStartLineCap="Flat" Stretch="Fill" StrokeEndLineCap="Flat" Stroke="White" StrokeThickness="1" StrokeMiterLimit="10" StrokeLineJoin="Miter" Canvas.Top="97.566" Width="31.697" UseLayoutRounding="False"/>
	</Canvas>
	<Canvas x:Name="compass_nail" Height="301" Canvas.Left="190" Canvas.Top="71" Width="38">
		<Path Data="F1M366.373,438.7822L353.218,329.9072L340.064,438.7822z" Fill="#FFE60013" Height="150.397" Canvas.Left="0.286" Stretch="Fill" Width="35.874" UseLayoutRounding="False"/>
		<Path Data="F1M340.0645,439.0322L353.2195,547.9072L366.3735,439.0322z" Fill="#FF898989" Height="150.397" Canvas.Left="0.286" Stretch="Fill" Canvas.Top="150.57" Width="35.874" UseLayoutRounding="False"/>
		<Path Data="F1M339.9688,438.7822C339.9688,431.4642,345.9008,425.5322,353.2188,425.5322C360.5368,425.5322,366.4688,431.4642,366.4688,438.7822C366.4688,446.0982,360.5368,452.0322,353.2188,452.0322C345.9008,452.0322,339.9688,446.0982,339.9688,438.7822" Fill="Black" Height="37.254" Stretch="Fill" Canvas.Top="131.943" Width="37.255" UseLayoutRounding="False"/>
	</Canvas>
</Canvas>

次の記事

『Expression Blend Tips』最新記事

コメント

▲このページのトップへ