モノトーンの伝説日記

Apex Legends, Splatoon, Programming, and so on...

SVG ファイルを xaml 上に描画する「Svg for Xaml Library」を公開しました。

 IkaConnect*1 vNext プロジェクトの一つとして書いたプログラムです。

github.com

概要

  1. 中身について
  2. 対応機能とか今後対応する予定とか。
  3. まとめ

f:id:mntone:20151212214705p:plain:w360

1. 中身について

 タイトル通り、SVGxaml 上にレンダリングして表示するやつです。RendererSvgImage という 2 つのコントローラーを主に使う形になります。

1.1 WinRtWin2dRenderer について

 これはいわば Win2D を使ったレンダラーになります。Win2D 以外のレンダリング コンポーネントを使う場合にはこれを書き換えれば可能になってます。

 あくまでレンダリングするだけで、描画位置などは担当しないです。レンダリングする前に Transform な行列を適切に指定して描画位置を調整する必要があります。

1.2 SvgImage について

 こちらは内部がレイアウトに合わせて自動でフィッティングするようなそんなコントロールになっています。リソースの扱いなどもこいつがやってくれるのが基本ですが、Page アンロード時に SafeUnload メソッドを呼び出すと安心かも。

 基本的に一般的な人はこっち使えばいいですが、ゲームを Win2D を使って書いててその中に SVG レンダリング工程を使いたいって人はさっきの WinRtWin2dRenderer を直接使う感じがいいでしょう。

2. 対応機能とか今後対応する予定とか。

 まず、style タグに対応してないので、style タグ使ってるのを使うと表示されないです。

 ※ style 属性は対応しています。

 ほかにも clip-path とか対応していませんが、基本的に Splatoon のギアを表示するのに特化して優先的に開発したので、あまり対応する気がないのも結構あるのは事実です。

3. まとめ

 Windows Runtime の xaml が RadialGradientBrush がないってのに気が付いて、応用性のある「xaml ツリー」実装はお蔵入りになりましたが、代わりに軽めの Win2D 実装ができたのは割といいと思います。思ったより早く描画できるし、何よりきれいなので、Direct2D のレンダリングのきれいさを実感するばかりですね。

 スクショとしてブログに正式には貼りませんが、私の画像タイムライン見てもらうと逆境強化とかきれいにレンダリングされてるの見れるんで、興味ある方は是非 svg をストレージに保存してこいつでレンダリングしてみてほしいですね。

 以上。

*1:Windows 向けの Splatoon のアプリ