atelier:mitsuba

i love UI/UX, Blend, XAML, Behavior, P5, oF, Web, Tangible Bits and Physical computing. なにかあればお気軽にご連絡ください。atelier@c-mitsuba.com

その37の補足:”Inkscapeから素材を作成して、Expression Blendで扱うまで”の罠って?

やまきさんにツッコミを頂いたので補足します。

結論からいうと、このxamlはBlendにインポート機能が無かった時代に作られたWPF向けのXAMLです。

具体的に中を見てみましょう。

Expression Blendにaiでインポートしたペンギンのxamlです。

<Canvas x:Name="penguin" HorizontalAlignment="Left" Height="365.6" UseLayoutRounding="False" VerticalAlignment="Top" Width="376.8">
	<Path Data="F1M309.309,373.904C309.309,373.466,309.668,373.103,310.105,373.103C310.547,373.103,310.906,373.466,310.906,373.904C310.906,374.345,310.547,374.705,310.105,374.705C309.668,374.705,309.309,374.345,309.309,373.904z M153.594,350.302C153.305,349.545,153.66,347.92,154.387,346.693C156.281,343.482,156.043,342.716,153.105,342.627C149.516,342.513,146.684,341.638,146.313,340.525C146.141,340.013,147.555,338.806,149.453,337.849C153.895,335.611,153.785,335.759,152.246,334.056C150.98,332.662,151.309,332.564,160.316,331.693C172.563,330.513,177.793,328.962,178.289,326.369C178.832,323.541,177.102,320.111,173.738,317.341C170.488,314.662,168.531,314.361,146.906,313.228C137.086,312.712,136.91,312.673,137.16,310.88C137.359,309.462,136.871,308.869,134.961,308.205C133.609,307.732,132.508,307.115,132.508,306.826C132.512,305.505,141.156,301.904,144.32,301.904C146.184,301.904,147.707,301.763,147.707,301.591C147.707,301.42,145.719,297.916,143.289,293.806C133.293,276.884,124.363,247.306,122.121,223.693C121.676,218.97,121.309,209.306,121.309,202.22C121.305,168.548,126.188,143.712,138.129,116.611C140.359,111.556,139.973,109.74,135.617,104.795C131.668,100.306,124.68,96.572,114.488,93.505C105.445,90.783,104.586,90.06,107.34,87.474C109.258,85.673,110.195,85.502,120.574,85.048C131.531,84.568,131.816,84.509,135.129,82.037C147.75,72.611,150.844,71.314,160.574,71.38C171.68,71.451,180.133,74.619,187.543,81.482C195.289,88.662,201.078,100.837,202.574,113.103C203.273,118.822,204.129,120.822,210.402,131.388C223.34,153.181,226.738,163.291,232.516,197.158C234.109,206.505,234.316,207.052,238.098,212.048C249.918,227.662,264.504,266.353,264.504,282.103C264.508,285.076,264.195,287.505,263.816,287.505C263.438,287.505,262.117,285.255,260.887,282.505C259.656,279.755,256.602,274.052,254.098,269.837C249.602,262.252,234.176,239.423,231.984,237.103C229.953,234.959,229.332,237.705,229.32,248.896C229.313,255.459,228.543,265.431,227.293,275.123C225.863,286.244,225.516,291.201,226.094,292.279C227.273,294.482,230.926,296.9,241.25,302.306C246.293,304.947,250.551,307.533,250.715,308.056C251.395,310.259,246.168,311.529,233.121,312.326C206.004,313.99,200.922,315.048,195.52,320.173C192.359,323.17,191.328,325.525,190.457,331.712C189.77,336.599,188.102,338.65,182.359,341.681C176.996,344.505,161.52,350.295,157.117,351.119C154.695,351.572,154.023,351.42,153.594,350.302z M153.594,350.302"
Fill="#FF333333" Height="303.327" Canvas.Left="105.956" Stretch="Fill" Canvas.Top="71.378" Width="204.95"/>
</Canvas>


一方こちらがInkscapeからxamlに出力したデータです。

<Viewbox xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Stretch="Uniform">
<Canvas Name="svg2985" Width="471" Height="457">
<Canvas.Resources/>
<!-- Unknown tag: metadata -->
<!-- Unknown tag: sodipodi:namedview -->
<Canvas Name="g3013">
<Canvas.RenderTransform>
<TranslateTransform X="0.70416038" Y="-10.562404"/>
</Canvas.RenderTransform>
<Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path3015" Fill="#FF333333">
<Path.Data>
<PathGeometry Figures="m 385.92935 478.6937 c 0 -0.55 0.45 -1 1 -1 0.55 0 1 0.45 1 1 0 0.55 -0.45 1 -1 1 -0.55 0 -1 -0.45 -1 -1 z m -194.6392 -29.50216 c -0.36318 -0.94642 0.0821 -2.97754 0.98944 -4.5136 2.36967 -4.01153 2.06753 -4.97143 -1.60024 -5.08392 -4.48692 -0.13762 -8.02713 -1.2317 -8.49129 -2.6242 -0.21427 -0.64279 1.55237 -2.14819 3.92586 -3.34534 5.54869 -2.79865 5.41248 -2.61357 3.4883 -4.73976 -1.58101 -1.74699 -1.16967 -1.86744 10.08947 -2.95452 15.30696 -1.4779 21.8476 -3.41572 22.4671 -6.65642 0.67572 -3.53477 -1.48481 -7.82069 -5.68957 -11.2866 -4.06219 -3.34841 -6.51046 -3.72353 -33.53987 -5.13892 -12.27599 -0.64283 -12.49431 -0.69539 -12.18233 -2.93299 0.24737 -1.77415 -0.36128 -2.51511 -2.75 -3.34782 -1.68722 -0.58817 -3.0666 -1.36288 -3.06529 -1.72158 0.006 -1.64921 10.81183 -6.15217 14.76347 -6.15217 2.32878 0 4.23415 -0.17599 4.23415 -0.39109 0 -0.2151 -2.48402 -4.59476 -5.52004 -9.73257 -12.49808 -21.15028 -23.66121 -58.12413 -26.46014 -87.63972 -0.55998 -5.90514 -1.01852 -17.98377 -1.01898 -26.8414 -0.002 -42.0905 6.09845 -73.13634 21.02821 -107.01149 2.78542 -6.32003 2.30336 -8.58845 -3.13905 -14.77136 -4.93708 -5.60881 -13.67584 -10.27766 -26.41481 -14.1126 -11.30173 -3.40227 -12.37406 -4.3067 -8.93584 -7.53674 2.39735 -2.25219 3.57219 -2.46762 16.54708 -3.03414 13.69351 -0.5979 14.04906 -0.67147 18.19004 -3.76388 15.77539 -11.78083 19.64501 -13.40143 31.80904 -13.32165 13.88047 0.091 24.44831 4.05069 33.70833 12.63015 9.68232 8.97072 16.92025 24.19426 18.79262 39.52649 0.87273 7.1466 1.94283 9.6466 9.78198 22.85294 16.17142 27.24343 20.41997 39.87928 27.64311 82.21476 1.99344 11.68375 2.24877 12.36474 6.97861 18.61271 14.77481 19.51708 33.00477 67.88001 33.00855 87.56959 7.1e-4 3.7125 -0.38726 6.75 -0.86215 6.75 -0.47489 0 -2.12288 -2.8125 -3.66221 -6.25 -1.53932 -3.4375 -5.35697 -10.56349 -8.48366 -15.83553 -5.6217 -9.47898 -24.90237 -38.01478 -27.64451 -40.91447 -2.53901 -2.68487 -3.31468 0.74719 -3.33087 14.73776 -0.009 8.20609 -0.97151 20.66822 -2.53097 32.78648 -1.78866 13.89935 -2.22273 20.09606 -1.50203 21.4427 1.47433 2.75481 6.03964 5.77462 18.94729 12.53306 6.30253 3.3 11.62538 6.5361 11.82855 7.19134 0.85318 2.75151 -5.68159 4.33757 -21.98867 5.33687 -33.89597 2.07717 -40.25268 3.40327 -47.00388 9.80573 -3.94837 3.74441 -5.23982 6.68929 -6.32714 14.42778 -0.85776 6.1047 -2.94332 8.67063 -10.12473 12.45679 -6.70174 3.53327 -26.04915 10.76838 -31.55317 11.79954 -3.02694 0.56708 -3.86525 0.3727 -4.39976 -1.02021 z" FillRule="NonZero"/>
</Path.Data>
</Path>
</Canvas>
</Canvas>
</Viewbox>

素直にCanvasでくくられているだけでなく、ViewBoxでもくくられています。
またPath.Dataも入れ子で書かれています。
ではこのxamlをコピーして、既存のxamlファイルにペーストしてどうなるか試してみましょう。

無効なXAMLといわれました。

エラーを見るとFiguresで引っかかっているようです。

一応SilverlightにもFiguresがありますが、"m ~~~~ z"でスタートポイントとエンドポイントを設定する書き方はできません。
http://msdn.microsoft.com/ja-jp/library/bb980098(v=vs.95).aspx
この書き方はWPFなら可能のようです。
http://msdn.microsoft.com/en-us/library/ms752293.aspx

そもそも蜜葉がInkscapeを触ってたのは3、4年前でSL1.0の頃です。
その頃からXAML書き出しはあったので、このXAML書き出しはWPF用だと考えられます。

いまではBlendにAiのインポート機能についたので、pdfにして、拡張子aiに変えて、インポートするのがスマートだと思います。
WPFでもSLでもWPでも、Blendがいい感じのPathコントロールにしてくれるはず!

どっかまちがってたらおしえてください!