my notebook blog : SVG
歯車っぽい設定アイコン画像をつくる / 円周上の点を計算して図形を描画
歯車風の見た目の 設定アイコン をSVGで描画しようとおもった。 歯車の図形は円周上の点を計算してそれをつなぐとうまく描画できそうなので、 円周上の点の計算とそれらを組み合わせて図形をSVG描画する方法についてコードをまとめておきます。
原点を中心にした半径 r の円であれば、X軸との間の角度 Θ の円周上の点は ( r*cosΘ, r*sinΘ ) になる。ポイントはこれだけです。
では これを Groovy で実装して、SVGで描画していきましょう。
SVGコマンドを android.graphics.Path に変換
以前に書いた Kotlin による簡易SVG parser の実装実験 を使って自前のAndroidアプリのアイコン描画などを行っていたのだが、 そんなの標準に提供されているライブラリで対処できるだろう、と思って調べたところ対処できたのでメモしておきます。
やりたいことは、SVGコマンドを android.graphics.Path に変換して、たとえば、 android.graphics.Canvas に drawPath() して、カスタムViewなどで表示させることです。 結論だけを先に書くと androidx.core.graphics.PathParser.createPathFromPathData() を使えばよい。
たくさんある SVG ファイルを一括で PNG に置き換える makefile を書いた件
make の wildcard 指定がわかりづらい。
星を SVG で描画したい
Small Sketch という Android アプリのアイコンで星型を使いたくなったので、星をSVGで記述する必要が生じた. 星は円周上の5つの点を直線で結ぶとできる図形. 円周上の点の計算といえば三角関数、それから直線の交点の計算、それらの点を結ぶと星のパスが描画できる. これらの計算処理をまとめます.
Apache Batik SVG Toolkit による SVG から PNG への変換
単に SVG を PNG に変換したいだけならば、 たとえば inkscape コマンドがあれば簡単にできる。 ただ、今回は諸事情により 画像変換だけでなく、さまざまな加工処理を連続して行いたかったので、 Groovy でそれらをまとめて処理することにした。
Kotlin による簡易SVG parser の実装実験
Androidアプリに使用するちょっとしたアイコンをコードで直接生成することがある。 いままで、Path に対して、moveTo, lineTo などを使って描写コードをちまちまと書いていた。けれど、SVGコマンドからパスへ変換するパーサをかけばいいじゃないか、そうすれば、moveTo, lineTo などのコードは書く必要がない。ということで書いたてみたのが これ createImageFromSVG.kts。
SVGパーサといっても、 対応コマンドは MmLlHhVvZz のみ。
しかも、 L10 10 100 100 のようなコマンドは L10 10 L100 100 のように書き下す必要があるなど、いろいろ制限は多い。