2017-04-11 11 views
1

私はWPFには新しく、ベクトルイメージの要素とやりとりする方法を理解するために数日間努力してきました。私の場合、GeometryDrawing要素。GeometryDrawingをUIからインタラクティブにする方法はありますか? (またはWPFのSVGイメージをロードしてやりとりする方法)

私はWPFではインタラクティブなGUI要素を作成する必要があるときに通常はシェイプを使用することを理解しています。そのため、さまざまなイベント処理があります。残念ながら私はインタラクティブ性のために設計されていないGeometryDrawingsのコレクションと対話する必要があります。

私の問題:

私は、SVG画像をロードし、ユーザーがその要素のいくつかと対話できるようにする必要があります。 SVGマップをロードし、いくつかの国をクリック可能にすることを想像してください。

私はSvgToXamlと呼ばれる非常にクールなライブラリを使用してXAMLにSVGを変換するために管理:私が管理している何

このライブラリでは、SVG画像を読み込んでxamlに変換できます。だから私は、変換後のこのようなもので終わる:

<DrawingImage x:Key="iconDrawingImage"> 
    <DrawingImage.Drawing> 
    <DrawingGroup ClipGeometry="M0,0 V600 H600 V0 H0 Z"> 
     <DrawingGroup> 
     <GeometryDrawing Geometry="F1 M600,600z M0,0z M371.987,227.641C419.615,275.269 457.026,326.349 478.901,371.193 505.259,425.226 508.997,470.915 490.004,489.907 470.211,509.7 421.737,505.791 364.273,476.928 320.828,455.107 272.242,417.809 227.031,372.597 180.677,326.243 142.081,277.052 120.364,232.781 92.884,176.758 90.307,129.038 109.721,109.624 128.559,90.785 172.969,93.568 226.415,119.381 271.574,141.193 323.895,179.548 371.987,227.641z"> 
      <GeometryDrawing.Pen> 
      <Pen Brush="#FFE91E63" Thickness="24" StartLineCap="Flat" EndLineCap="Flat" LineJoin="Miter" MiterLimit="1" /> 
      </GeometryDrawing.Pen> 
     </GeometryDrawing> 
     <GeometryDrawing Geometry="F1 M600,600z M0,0z M272.931,201.125C337.983,183.66 400.92,176.771 450.698,180.223 510.672,184.383 552.118,203.97 559.083,229.911 566.342,256.944 538.738,296.984 485.029,332.345 444.421,359.078 387.84,382.533 326.088,399.114 262.776,416.112 200.881,424.972 151.68,421.667 89.42,417.486 46.796,395.878 39.676,369.361 32.769,343.63 57.364,306.55 106.426,273.147 147.879,244.923 207.243,218.761 272.931,201.125z"> 
      <GeometryDrawing.Pen> 
      <Pen Brush="#FFE91E63" Thickness="24" StartLineCap="Flat" EndLineCap="Flat" LineJoin="Miter" MiterLimit="1" /> 
      </GeometryDrawing.Pen> 
     </GeometryDrawing> 
    </DrawingGroup> 
    </DrawingImage.Drawing> 
</DrawingImage> 

私がイメージソースとして、このXAMLを使用して、私は画像をレンダリングすることができますが、私はそれの要素と対話する方法を考え出したていません。

私はSVGをXAMLに変換していたので、その形状や図形を識別してやりとりできるはずだと思いました。

これまでのところ私は道を見いださず、Googleは解決策を見つけるのを手助けすることができないようです。

GeometryDrawingまたはDrawingImage要素とすべて対話することは可能ですか?

WPFでこれを達成する他の方法はありますか?私の代わりに、JavaScriptでSVGを解析し、インタラクティブに必要な要素にイベントハンドラを追加するHTMLで作業する方法があります。しかし私はWPFを使いたいと思っていました。

ありがとうございました。

+2

私の意見では、変換結果が、単に統合されたDrawingImageの代わりに対話するための単なる独立したパスにあるときはずっと簡単です。個人的には、Mike Swansonの[AI to XAML](http://www.mikeswanson.com/xamlexport/)プラグインを使ってIllustratorからXAMLに直接エクスポートしてそこから移動します。私は自由な分を後で持っていきます。それで誰も答えなければ、あなたがうまくいくために対話的なPath Geometryコンセプトの例を掘り下げます。 –

答えて

2

あなたの質問はあまりにも完全な答え(おそらく他の誰かが私が想定しているようなフリータイムを持っている場合)が広いですが、私は少なくともあなたの目標に関連した簡単な例を提供することができます。あなたは次の例をどこにでも投げて、それを撃つことができます。 PoCが伝えていることは、さまざまな方法(Red on MouseOver、Click on Green)でPathとやり取りする方法ですが、現実的なコマンドや何かをワイヤリングする時間はかかりませんでした。私はおそらく選択などとにかく

周りMarching AntsのようなクーラーアニメーションをIsCheckedのような特性を保持するためにToggleButtonタイプのようButtonBaseに各形状を回して作るようなことをやっているはずだ、これが流れる創造的なジュースを得ることができます願っています。以下のPoCで使用される主なツールは、Mike SwansonのAI to XAMLエクスポートプラグインとBlendです。それが助けてくれることを願っています。

視覚的な例(不安定なgifで、申し訳ありません)。 enter image description here

とあなたと遊ぶXAMLはどこにでもあります。申し訳ありません

PASTEBIN LINK : https://pastebin.com/u6qP2qFt

は、サンプルをウンチするペーストビンを使用していた答えを提出するための文字制限を超えました。

+0

あなたの返信のためにChrisにありがとう。 AIからXAMLは、AIで作成されたインタラクティブな画像を生成する素晴らしい方法のようです。私の問題は残念ながらもっと複雑です。サードパーティのツールでは、SVGを使用してWPFを使用してインタラクティブにする、複雑なチャート状のSVG(データポイントがロードされている)を生成します。 SvgToXamlというライブラリが見つかりました。このライブラリはSVGをとり、私があなたに示したDrawingImageに変換します。しかし、あなたがコメントしたように、統合されたdrawingImageは使いやすいものではありません。 DrawingImageをインタラクティブにする方法があるかどうか知っていますか? – Luciano

+0

@ルチアーノだから、あなたはそういったやり方で複数の不満を抱くだろう。 DrawingImageにはイベントなどがないという点で多くの制限があります。それはGeometryDrawingのようなサブクラスでも同じですので、Mouseイベント(Clickなど)のようなものについては個々のシェイプにイベントをアタッチできませんいくつかの深刻なカスタマイズ。私はそれがたくさんあることを覚えていればそれは封印されています。だから正直言って、少なくとも私の頭の上から - 私はコンセプトで示したテクニックの他に、あなたにはこれに対する簡単な答えはありません。ごめんなさい。 –

+0

@Chirs私は理解し、あなたは私が恐れていたことを確認しました。あなたの返信に感謝します。 – Luciano

関連する問題