androidx.graphics:graphics-shapes:1.1.0 にて追加された SvgPathParser.parseFeatures() を使用した際、SVGのパスが正しくパースされず、形状が歪むバグに遭遇しました。

本記事では、その原因とコード上で解決する方法を紹介します。

なお、本件はすでにGoogle Issue Trackerに報告済みです：Issue Tracker #527243511。

事象・原因

SvgPathParser.parseFeatures() を使ってSVGパス文字列から features を取得し、それを RoundedPolygon に変換して描画したところ、本来の形状より歪んでしまう現象が発生します。

SVGパスに含まれる2次ベジェ曲線（qコマンドなど）を、ライブラリ内部で3次ベジェ曲線に変換して扱う際は、2/3の係数を用いた座標計算が必要です。しかし、ソースコードを確認したところ、2次ベジェ曲線の制御点がそのまま3次ベジェ曲線の2つの制御点として単純にコピーされていました：

'q' -> addCurveWith(command.xy(0, 1), command.xy(0, 1), command.xy(2, 3))

パスが歪んでしまった形状の例	期待している形状の例

解決方法

SvgPathParser.parseFeatures() は、リリースされるアプリの本番環境（実行時）で動的に実行することは推奨されておらず、あくまでも開発中やビルド時のみの利用が想定されています。そのため、ここでは取得した Feature に直接パッチを当てて補正することで解決をはかります。

パース結果として得られた Feature の中から、ベジェ曲線を保持する Cubic クラスをチェックします。2つの制御点が完全に同一座標にある場合、単純コピーされた2次ベジェ曲線と判断し、本来の2/3の係数がついた制御点になるよう再計算・上書きします：

val features = SvgPathParser.parseFeatures(
    svgPath = "...",
).map { feature ->
    val patchedCubics = feature.cubics.map { cubic ->
        // 2つの制御点が同一座標の場合、単純コピーされた2次ベジェ曲線とみなす
        if (cubic.control0X == cubic.control1X && cubic.control0Y == cubic.control1Y) {
            Cubic(
                anchor0X = cubic.anchor0X,
                anchor0Y = cubic.anchor0Y,
                anchor1X = cubic.anchor1X,
                anchor1Y = cubic.anchor1Y,
                // 本来必要な2/3の係数を適用して制御点を再計算
                control0X = cubic.anchor0X + (cubic.control0X - cubic.anchor0X) * 2f / 3f,
                control0Y = cubic.anchor0Y + (cubic.control0Y - cubic.anchor0Y) * 2f / 3f,
                control1X = cubic.anchor1X + (cubic.control0X - cubic.anchor1X) * 2f / 3f,
                control1Y = cubic.anchor1Y + (cubic.control0Y - cubic.anchor1Y) * 2f / 3f,
            )
        } else {
            cubic
        }
    }

    when {
        feature.isIgnorableFeature -> Feature.buildIgnorableFeature(cubics = patchedCubics)
        feature.isEdge -> Feature.buildEdge(cubic = patchedCubics.single())
        feature.isConvexCorner -> Feature.buildConvexCorner(cubics = patchedCubics)
        feature.isConcaveCorner -> Feature.buildConcaveCorner(cubics = patchedCubics)
        else -> error("unknown feature type")
    }
}

参考文献