Blazor项目中C#计算SVG路径质心的问题排查与修正

问题背景 #

在Blazor项目中，需要计算以下SVG路径的质心坐标：

<path id="myPath" fill="@GetColor(1, 16, @LeftInsolePressures[0])" d="M1185 8408 c-2 -7 -6 -277 -10 -599 -5 -474 -3 -588 7 -596 7 -6 42
-14 78 -18 81 -8 457 -61 525 -74 33 -6 54 -6 62 1 10 8 13 126 13 529 l0 518
-22 21 c-58 54 -222 145 -328 182 -122 42 -316 63 -325 36z" />

尝试了以下C#代码，但无法得到正确的质心：

public static (double cx, double cy) CalculatePathCenter(string pathData)
{
    double xMin = double.MaxValue, xMax = double.MinValue, yMin = double.MaxValue, yMax = double.MinValue;

    // Parsing path data and extracting coordinates
    string[] commands = pathData.Split(new char[] { ' ', ',' }, StringSplitOptions.RemoveEmptyEntries);
    int i = 0;
    while (i < commands.Length)
    {
        string command = commands[i];
        if (command == "M" || command == "m" || command == "L" || command == "l" || command == "C" || command == "c")
        {
            // Move To, Line To, or Cubic Bezier curve command
            for (int j = 1; j < 7; j += 2)
            {
                double x = double.Parse(commands[i + j]);
                double y = double.Parse(commands[i + j + 1]);

                xMin = Math.Min(xMin, x);
                xMax = Math.Max(xMax, x);
                yMin = Math.Min(yMin, y);
                yMax = Math.Max(yMax, y);
            }
            i += (command == "C" || command == "c") ? 7 : 3; // Move to the next command
        }
        else if (command == "z" || command == "Z")
        {
            // Close Path command - Ignored
            i++;
        }
        else
        {
            i++;
        }
    }

    // Calculate center using bounding box coordinates
    double cx = (xMin + xMax) / 2;
    double cy = (yMin + yMax) / 2;

    return (cx, cy);
}

现有代码的核心问题 #

1. 混淆了包围盒中心与质心：
   代码计算的是路径包围盒的几何中点，而非质心。质心是图形的质量中心，取决于形状的面积分布；包围盒中点仅取坐标极值的平均值，当图形不对称时（比如用户的鞋型路径），两者结果差异极大。

2. SVG路径解析逻辑严重错误：

   • 未区分绝对/相对坐标：小写命令（m/l/c）表示相对当前位置的坐标，代码直接当作绝对坐标解析，导致坐标值完全错误。
   • 未处理连续命令省略：SVG路径中，同一类型的命令可重复使用参数而无需重复写命令（比如用户路径中c命令后跟了多组参数），代码仅处理第一组参数，忽略后续坐标。
   • 命令识别错误：拆分后将数值（如-2）误判为命令，导致解析流程混乱。

3. 完全忽略曲线的面积贡献：
   代码仅提取贝塞尔曲线的控制点，未将曲线转换为可计算面积的多边形近似，完全忽略了曲线围成的区域对质心的影响。

修正方案 #

要准确计算SVG路径的质心，需完成两步：正确解析SVG路径并将曲线近似为多边形，使用多边形质心公式计算结果。

步骤1：正确解析SVG路径 #

需维护当前坐标位置，区分绝对/相对命令，处理连续省略的命令，并将贝塞尔曲线细分为多条直线段（近似为多边形）。

步骤2：计算多边形质心 #

对于闭合多边形，质心计算公式为：
$$
cx = \frac{1}{6A} \sum_{i=0}^{n-1} (x_i + x_{i+1}) (x_i y_{i+1} - x_{i+1} y_i)
$$
$$
cy = \frac{1}{6A} \sum_{i=0}^{n-1} (y_i + y_{i+1}) (x_i y_{i+1} - x_{i+1} y_i)
$$
其中$A$是多边形的面积（取绝对值），$x_n=x_0, y_n=y_0$。

修正后的完整代码 #

using System;
using System.Collections.Generic;
using System.Linq;

public static class SvgPathCentroidCalculator
{
    private enum CommandType
    {
        MoveTo, LineTo, CubicBezier, ClosePath
    }

    private struct PathCommand
    {
        public CommandType Type;
        public bool IsRelative;
        public List<(double X, double Y)> Points;
    }

    public static (double Cx, double Cy) CalculateCentroid(string pathData)
    {
        var commands = ParsePathData(pathData);
        var polygonPoints = ConvertCommandsToPolygon(commands);
        return CalculatePolygonCentroid(polygonPoints);
    }

    private static List<PathCommand> ParsePathData(string pathData)
    {
        var commands = new List<PathCommand>();
        var tokens = pathData.Split(new[] { ' ', ',', '\n', '\r' }, StringSplitOptions.RemoveEmptyEntries);
        int index = 0;
        CommandType currentType = CommandType.MoveTo;
        bool currentRelative = false;

        while (index < tokens.Length)
        {
            string token = tokens[index];
            if (IsCommandToken(token))
            {
                currentType = GetCommandType(token[0]);
                currentRelative = char.IsLower(token[0]);
                index++;
            }

            var points = new List<(double X, double Y)>();
            int pointsNeeded = GetPointsPerCommand(currentType);

            while (points.Count < pointsNeeded && index < tokens.Length)
            {
                if (double.TryParse(tokens[index], out double x) && double.TryParse(tokens[index + 1], out double y))
                {
                    points.Add((x, y));
                    index += 2;
                }
                else
                {
                    // 处理无效token，实际项目可添加错误处理逻辑
                    index++;
                }
            }

            if (points.Any())
            {
                commands.Add(new PathCommand
                {
                    Type = currentType,
                    IsRelative = currentRelative,
                    Points = points
                });
            }
        }

        return commands;
    }

    private static bool IsCommandToken(string token)
    {
        return token.Length == 1 && "MmLlCcZz".Contains(token[0]);
    }

    private static CommandType GetCommandType(char c)
    {
        return char.ToUpper(c) switch
        {
            'M' => CommandType.MoveTo,
            'L' => CommandType.LineTo,
            'C' => CommandType.CubicBezier,
            'Z' => CommandType.ClosePath,
            _ => CommandType.MoveTo
        };
    }

    private static int GetPointsPerCommand(CommandType type)
    {
        return type switch
        {
            CommandType.MoveTo => 1,
            CommandType.LineTo => 1,
            CommandType.CubicBezier => 3, // 控制点1, 控制点2, 终点
            CommandType.ClosePath => 0,
            _ => 0
        };
    }

    private static List<(double X, double Y)> ConvertCommandsToPolygon(List<PathCommand> commands)
    {
        var polygon = new List<(double X, double Y)>();
        double currentX = 0, currentY = 0;
        (double X, double Y) startPoint = (0, 0);

        foreach (var cmd in commands)
        {
            switch (cmd.Type)
            {
                case CommandType.MoveTo:
                    foreach (var pt in cmd.Points)
                    {
                        double x = cmd.IsRelative ? currentX + pt.X : pt.X;
                        double y = cmd.IsRelative ? currentY + pt.Y : pt.Y;
                        polygon.Add((x, y));
                        currentX = x;
                        currentY = y;
                        startPoint = (x, y);
                    }
                    break;

                case CommandType.LineTo:
                    foreach (var pt in cmd.Points)
                    {
                        double x = cmd.IsRelative ? currentX + pt.X : pt.X;
                        double y = cmd.IsRelative ? currentY + pt.Y : pt.Y;
                        polygon.Add((x, y));
                        currentX = x;
                        currentY = y;
                    }
                    break;

                case CommandType.CubicBezier:
                    foreach (var ptGroup in cmd.Points.Chunk(3)) // 每组3个点：c1, c2, end
                    {
                        if (ptGroup.Length != 3) break;
                        (double c1x, double c1y) = ptGroup[0];
                        (double c2x, double c2y) = ptGroup[1];
                        (double endx, double endy) = ptGroup[2];

                        // 转换为绝对坐标
                        c1x = cmd.IsRelative ? currentX + c1x : c1x;
                        c1y = cmd.IsRelative ? currentY + c1y : c1y;
                        c2x = cmd.IsRelative ? currentX + c2x : c2x;
                        c2y = cmd.IsRelative ? currentY + c2y : c2y;
                        endx = cmd.IsRelative ? currentX + endx : endx;
                        endy = cmd.IsRelative ? currentY + endy : endy;

                        // 细分贝塞尔曲线为10段（可调整精度）
                        var curvePoints = SubdivideCubicBezier(currentX, currentY, c1x, c1y, c2x, c2y, endx, endy, 10);
                        polygon.AddRange(curvePoints.Skip(1)); // 跳过起点，避免重复
                        currentX = endx;
                        currentY = endy;
                    }
                    break;

                case CommandType.ClosePath:
                    polygon.Add(startPoint);
                    currentX = startPoint.X;
                    currentY = startPoint.Y;
                    break;
            }
        }

        // 确保路径闭合
        if (polygon.Count > 0 && polygon.First() != polygon.Last())
        {
            polygon.Add(polygon.First());
        }

        return polygon;
    }

    private static List<(double X, double Y)> SubdivideCubicBezier(double x0, double y0, double x1, double y1, double x2, double y2, double x3, double y3, int segments)
    {
        var points = new List<(double X, double Y)>();
        points.Add((x0, y0));

        for (int i = 1; i <= segments; i++)
        {
            double t = (double)i / segments;
            double mt = 1 - t;

            double x = mt * mt * mt * x0 + 3 * mt * mt * t * x1 + 3 * mt * t * t * x2 + t * t * t * x3;
            double y = mt * mt * mt * y0 + 3 * mt * mt * t * y1 + 3 * mt * t * t * y2 + t * t * t * y3;
            points.Add((x, y));
        }

        return points;
    }

    private static (double Cx, double Cy) CalculatePolygonCentroid(List<(double X, double Y)> points)
    {
        if (points.Count < 3)
            return (0, 0);

        double area = 0;
        double cx = 0;
        double cy = 0;

        for (int i = 0; i < points.Count - 1; i++)
        {
            (double x1, double y1) = points[i];
            (double x2, double y2) = points[i + 1];

            double cross = x1 * y2 - x2 * y1;
            area += cross;
            cx += (x1 + x2) * cross;
            cy += (y1 + y2) * cross;
        }

        area *= 0.5;
        double factor = 1 / (6 * area);
        cx *= factor;
        cy *= factor;

        return (Math.Abs(cx), Math.Abs(cy)); // 取绝对值确保坐标为正（SVG坐标系Y向下，可根据需求调整）
    }
}

使用示例 #

在Blazor组件中调用：

string pathData = "M1185 8408 c-2 -7 -6 -277 -10 -599 -5 -474 -3 -588 7 -596 7 -6 42 -14 78 -18 81 -8 457 -61 525 -74 33 -6 54 -6 62 1 10 8 13 126 13 529 l0 518 -22 21 c-58 54 -222 145 -328 182 -122 42 -316 63 -325 36z";
var centroid = SvgPathCentroidCalculator.CalculateCentroid(pathData);
// centroid.Cx 和 centroid.Cy 即为质心坐标

说明 #

• 贝塞尔曲线的细分段数（SubdivideCubicBezier方法中的segments参数）可根据精度需求调整，段数越高越精确，但计算量也越大。
• SVG坐标系的Y轴向下，若需要转换为常规坐标系（Y向上），可对cy取反。

内容的提问来源于stack exchange，提问作者Hekky K