LoginSignup
11
10

More than 5 years have passed since last update.

SVGのpath dをCGPathRefに変換する

Last updated at Posted at 2014-12-20

iPhoneの解像度が増えた影響で、アイコンなどにベクターデータを使うメリットが増してきています。
ただ、iOS標準フレームワークではこの辺りはちょっとばかしかゆいところに手が届かないところです。

今回は小さな対応策の1つとして、

SVGのpath d要素をCGPathに変換する

というのをやろうと思います。

この方法には、

・svg全部パースするより遥かに簡単
・読み込んだCGPathRefは描画前に編集したり、描画方法を自由にカスタマイズできる

といったメリットがあります。

また、SVGKit( https://github.com/SVGKit/SVGKit )なんかもありますが、
ちょっとわりと大きなフレームワークなので、
一部だけSVG使いたいだけの時にはちょっとオーバースペックな気がします。

というわけでソースです。
コピペしてすぐ使い始めることができます。

https://github.com/Ushio/SVGPathD
※コア実装はSVGPathD.h, SVGPathD.mmで、あとはデモ用です。

path dの要素はとても単純で、
コマンド文字と、それに付随する数値データで構成されています。

NSScannerを使えばこのあたりの連続データは比較的簡単に読むことができました。
SVGのたくさんのタグをパースして適切に対応するのに比べたらずいぶんと軽いです。

また、今回は、Aコマンド(円弧を描くコマンド)は面倒だったのでサポートしていませんが、
Mm, Ll, Hh, Vv, Cc, Ss, Qq, Tt, Zz
のコマンドは読むことができます。

ss.png

デモのパスデータはこちらからお借りしています。
http://www.flaticon.com/packs/merry-christmas-line
http://creativecommons.org/licenses/by/3.0/

今回提案した手法は、全然万能な解決策ではありませんが、
結構ガチっとはまるケースだってあるような気がします。

11
10
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
10