Android SVG 描画

SVG の概要

1.1 SVG（Scalable Vector Graphics）とは、Scalable Vector Graphics の略で、XML で形状を指定し、SVG ビューアで XML を描画するグラフィックス形式です。

1.2 SVG はビットマップと区別でき、ぼやけずに拡大でき、一部のアイコンやボタンなどの描画に使用できますが、複雑すぎると描画速度の低下やメモリ使用量の増加を引き起こします。簡単なグラフィック描画に適しています。

1.3 SVG 座標系もデカルト座標系です Android の描画座標系と同様に、x=0、y=0 の点が左上隅にあり、通常のグラフ座標系と比較すると y 軸が反転しています。SVG で y が増加すると、ポイント、シェイプなどが上向きではなく下向きに移動します。座標系の単位はデフォルトでピクセル px ですが、他の単位も選択できます。

em デフォルトのフォント サイズ - 通常は文字の高さです。

ex キャラクターの高さ x

px ピクセル

pt ポイント (1/72 インチ)

PC パイカ (1/6 インチ)

cm センチメートル

mm ミリメートル

インチで

1.4 SVG 要素には、四角形、円、線、パス、テキストなど、多数があります。ただし、Android は、座標データを使用して点と線の位置を記述するパスのみをサポートします。

<svg xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">

  <svg x="10">
    <rect x="10" y="10" height="100" width="100"
        style="stroke:#ff0000; fill: #0000ff"/>
  </svg>
  <svg x="200">
    <rect x="10" y="10" height="100" width="100"
        style="stroke:#009900; fill: #00cc00"/>
  </svg>

</svg>

2種類のAndroid SVGの使用

2.1 前述したように、Android はパス要素の描画をサポートしており、パスには次の要素が含まれます。

m|M = moveto は特定の点に移動します。
l|L = lineto は、特定の点まで直線を描きます。
h|H = 水平線 特定の点に水平線を描きます。
v|V = 垂直線 特定の点に垂直線を描きます。
q|Q = 2 次ベジェ曲線から 2 次ベジェ曲線へ
t|T = 滑らかな 2 次ベジェ曲線から滑らかな 2 次ベジェ曲線へ
c|C = 曲線から 3 次ベジェ曲線
へ s|S = 滑らかな曲線から滑らかな 3 次ベジェ曲線へ
a|A = 楕円弧
z|Z = closepath 終点から始点まで直線を描き、閉じた領域を形成します。

注：大文字は絶対位置（ウィンドウx=0、y=0の位置）、小文字は相対位置（自分の位置）を示します。

2.2 Android SVGの使用、長方形の描画例

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="160dp"
    android:height="60dp"
    android:viewportWidth="160"
    android:viewportHeight="60">
    <path
        android:pathData="M0,0
        L160,0
        L160,60
        L0,60
        L0,0Z"
        android:fillColor="#8fafdb"/>
</vector>

<!--
M0,0      移到(0，0)点开始绘制 左上角
L160,0    画线(0，0)坐标到(160，0)坐标 右上角
L160,60   画线(160,0)坐标到160,60)坐标 右下角
L0,60     画线(160,60)坐标到(0,60)坐标 右下角
L0,0Z      画线(0,60)坐标到(00)坐标 左上角闭合
-->

2.3 尖った長方形を描く

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="160dp"
    android:height="60dp"
    android:viewportWidth="160"
    android:viewportHeight="60">
    <path
        android:fillColor="#8fafdb"
        android:pathData="M0,30
        L20,0
        L140,0
        L160,30
        L140,60
        L20,60
        L0,30Z" />
</vector>

<!--
M0,30     移到(0,30)点开始绘制 左上角
L20,0     画线(0,30)坐标到(20,0)坐标 右上角
L140,0    画线(20,0)坐标到(140,0)坐标 右中间
L160,30   画线(140,0)坐标到(160,30)坐标 右下角
L140,60   画线(60,30)坐标到(L140,60)坐标 左下角
L20,60     画线(140,60)坐标到(20,60)坐标 左中间
L0,30Z     画线(0,60)坐标到(0,30)坐标 右上角闭合
-->

2.3 角丸長方形を描く

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="160dp"
    android:height="60dp"
    android:viewportWidth="160"
    android:viewportHeight="60">
    <path
        android:pathData="M10,0
        L150,0
        A10,10 0 0 1 160,10
        L160,10
        L160,50
        A10,10 0 0 1 150,60
        L150,60
        L10,60
        A10,10 0 0 1 0,50
        L0,50
        L0,10
        A10,10 0 0 1 10,0
        L10,0Z"
        android:fillColor="#8fafdb"/>
</vector>

<!--
M0,0                   移到(0，0)点开始绘制 左上角
L150,0                 画线(0，0)坐标到(150,0)坐标 右上角
A10,10 0 0 1 160,10    绘制一个起点(150,0)，半径10，角度0，大弧1，顺时针1，终点(160,10)的圆角
L160,10
L160,50                画线(160,10)坐标到(160,60)坐标 右下角
A10,10 0 0 1 150,60    绘制一个起点(160,60)，半径10，角度0，大弧1，顺时针1，终点(150,60)的圆角
L150,60
L10,60                 画线(150,60)坐标到(10,60)坐标 左下角
A10,10 0 0 1 0,50      绘制一个起点(10,60)，半径10，角度0，大弧1，顺时针1，终点(0,50)的圆角
L0,50
L0,10                 画线(0,50)坐标到(0,10)坐标 左下角
A10,10 0 0 1 10,0     绘制一个起点(0,10)，半径10，角度0，大弧1，顺时针1，终点(10,0)的圆角
L10,0Z                画线(10,0)坐标到(10,0)坐标 左上角闭合
-->

2.4 円を描きます。注: 開始座標と終了座標は描画されないため、終了座標はポイント座標に対してずらして配置する必要があります。

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="160dp"
    android:height="160dp"
    android:viewportWidth="160"
    android:viewportHeight="160">
    <path
        android:pathData="M0,80
        A80,80
        0
        1
        1
        0,80.00001Z"
        android:fillColor="#8fafdb"/>
</vector>

<!--
pathData="
M x y
A rx ry
x-axis-rotation
large-arc-flag
sweep-flag
x y"

M0,80                移到(0,80)点开始绘制,顶部中间位置,rx ry 分别是是椭圆的x轴半径和y轴半径
A80,80               画弧度(80,80) X方向半径，和Y方向半径
0                    x-axis-rotation 是椭圆相对于坐标系的旋转角度
1                    large-arc-flag 是标记绘制大弧(1)还是小弧(0)部分。
1                    sweep-flag 是标记向顺时针(1)还是逆时针(0)方向绘制。
0.00001,80.00001Z    x y是圆弧终点的坐标,由于坐标重合不能绘制，所以要偏移一点坐标
-->

2.5 ベジェ曲線を描く

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="160dp"
    android:height="160dp"
    android:viewportWidth="160"
    android:viewportHeight="160">
    <path
        android:pathData="M0,0
        Q 80,80 160,0
        "
        android:fillColor="#8fafdb"/>

    <!-- 辅助查看的线（斜率） -->
    <path
        android:pathData="M0,0
        L80,80 160,0"
        android:strokeColor="#ff0000" android:strokeWidth="1"/>

</vector>

<!--
pathData="="Q x1 y1, x y" // 控制点 (x1,y1)，终点 (x,y) 大写Q绝对位置 小写q相对位置

-->

赤は補助線です 

2.5 二次ベジェ曲線を描く 

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="160dp"
    android:height="160dp"
    android:viewportWidth="160"
    android:viewportHeight="160">
    <path
        android:pathData="M0,80
        Q 40,0 80,80
        T160,80"
        android:strokeColor="#8fafdb" android:strokeWidth="2"/>

    <!-- 辅助查看的线（斜率）1 -->
    <path
        android:pathData="M0,80
        L40,0 80,80"
        android:strokeColor="#ff0000" android:strokeWidth="1" android:strokeAlpha="0.5"/>

    <!-- 辅助查看的线（斜率）2 -->
    <path
        android:pathData="M80,80
        L120,160 160,80"
        android:strokeColor="#ffff00"  android:strokeWidth="1" android:strokeAlpha="0.5"/>
</vector>

<!--
pathData="="Q x1 y1, x y" // 控制点 (x1,y1)，终点 (x,y) 大写Q绝对位置 小写q相对位置
pathData="Q x1 y1, x y T x y" 	// 终点 T(x y)，控制点通过前面的Q命令计算得出
-->