根據SVG Arc求出其開始角、擺動角和橢圓圓心

SVG Arc

目前Svg的Arc的參數字元串如下:

a  rx  ry  x-axis-rotation  large-arc-flag  sweep-flag  x  y

除了a表示標識為Arc之外,其餘參數說明如下:

參數 說明
rx 橢圓半長軸
ry 橢圓半短軸
x-axis-rotation 橢圓相對於坐標系的旋轉角度，角度數而非弧度數
large-arc-flag 是否優(大)弧：0否，1是
sweep-flag 繪製方向：0逆時針，1順時針
x 圓弧終點的x坐標
y 圓弧終點的y坐標

求Arc的開始角和擺動角

實際上，在W3C的有關SVG Arc實現有相關文檔和公式

當已知參數：

x1 y1 x2 y2 fA fS rx ry φ

求出以下參數的值：

cx cy θ1 Δθ

其中已知參數說明如下：

參數 說明 備註
(x1,y1) 當前坐標
(x2,y2) 終點坐標
fA 是否優(大)弧 Arc的參數字元：large-arc-flag
fS 繪製方向 Arc的參數字元：sweep-flag
rx 橢圓半長軸 Arc的參數字元：rx
ry 橢圓半短軸 Arc的參數字元：ry
φ 橢圓相對於坐標系的旋轉角度 Arc的參數字元：x-axis-rotation

需要求的參數說明：

參數 說明 備註
(cx,cy) 橢圓中心坐標點
θ1 起始角
Δθ 起始角到結束角的夾角(擺動角) 結束角= 起始角θ1+擺動角Δθ

那麼則有如下公式：

程式碼如下：

        /// <summary>
        /// 獲取弧線的開始角度和擺動角度
        /// </summary>
        /// <param name="x1">起點X</param>
        /// <param name="y1">起點Y</param>
        /// <param name="x2">終點X</param>
        /// <param name="y2">終點Y</param>
        /// <param name="fA">優劣弧:1 優弧  0劣弧</param>
        /// <param name="fs">順逆時針繪製：1 順時針  0 逆時針</param>
        /// <param name="rx">橢圓半長軸</param>
        /// <param name="ry">橢圓半短軸</param>
        /// <param name="φ">旋轉角</param>
        /// <returns></returns>
        private static (double startAngle, double swAngle) GetArcStartAngAndSwAng(double x1, double y1, double x2, double y2, double fA, double fs, double rx, double ry, double φ)
        {

            var matrix1 = new Matrix { M11 = Math.Cos(φ), M12 = Math.Sin(φ), M21 = -Math.Sin(φ), M22 = Math.Cos(φ) };
            var matrix2 = new Matrix { M11 = (x1 - x2) / 2, M21 = (y1 - y2) / 2 };
            var matrixX1Y1 = Matrix.Multiply(matrix1, matrix2);

            var x1_ = matrixX1Y1.M11;
            var y1_ = matrixX1Y1.M21;

            var a = Math.Pow(rx, 2) * Math.Pow(ry, 2) - Math.Pow(rx, 2) * Math.Pow(y1_, 2) - Math.Pow(ry, 2) * Math.Pow(x1_, 2);
            var b = Math.Pow(ry, 2) * Math.Pow(y1_, 2) + Math.Pow(ry, 2) * Math.Pow(x1_, 2);

            double c = 0;
            if (fA == fs)
            {
                c = -Math.Sqrt(a / b);
            }
            else
            {
                c = Math.Sqrt(a / b);
            }

            var matrixCxCy = new Matrix { M11 = c * (rx * y1_ / ry), M21 = c * (-ry * x1_ / rx) };

            var cx_ = matrixCxCy.M11;
            var cy_ = matrixCxCy.M21;

這時候我們通過矩陣運算得到了矩陣x1y1和矩陣cxcy，然後還有以下公式求開始角和擺動角：

那麼程式碼如下：

             //求開始角
            //cos<夾角> = 兩向量之積 / 兩向量模的乘積
            //< 夾角 > = arcCos(兩向量之積 / 兩向量模的乘積)

            //向量U的坐標
            double vectorUx = 1;
            double vectorUy = 0;

            //向量V的坐標
            double vectorVx = (x1_ - cx_) / rx;
            double vectorVy = (y1_ - cy_) / ry;


            var multiVectorUVectorV = vectorUx * vectorVx + vectorUy * vectorVy; //兩向量的乘積
            var vectorUMod = Math.Sqrt(vectorUx * vectorUx + vectorUy * vectorUy);//向量U的模
            var vectorVMod = Math.Sqrt(vectorVx * vectorVx + vectorVy * vectorVy);//向量V的模
            var cosResult = multiVectorUVectorV / (vectorUMod * vectorVMod);

            var startAngle = Math.Acos(cosResult) * 180 / Math.PI;


            //求擺動角
            //cos<夾角> = 兩向量之積 / 兩向量模的乘積
            //< 夾角 > = arcCos(兩向量之積 / 兩向量模的乘積)

            //向量U的坐標
            vectorUx = (x1_ - cx_) / rx;
            vectorUy = (y1_ - cy_) / ry;

            //向量V的坐標
            vectorVx = (-x1_ - cx_) / rx;
            vectorVy = (-y1_ - cy_) / ry;

            multiVectorUVectorV = vectorUx * vectorVx + vectorUy * vectorVy; //兩向量的乘積
            vectorUMod = Math.Sqrt(vectorUx * vectorUx + vectorUy * vectorUy);//向量U的模
            vectorVMod = Math.Sqrt(vectorVx * vectorVx + vectorVy * vectorVy);//向量V的模
            cosResult = multiVectorUVectorV / (vectorUMod * vectorVMod);

            var swAngle = Math.Acos(cosResult) * 180 / Math.PI;

            if (fs == 0)
            {
                swAngle = -swAngle;
            }
            else
            {
                swAngle = Math.Abs(swAngle);
            }

那麼我們來測試下，我準備了一段Arc字元串：

"M0,0 A18.10005249343832,16.00031496062992,60,0,0,-21.634424410598417,-21.472913522584044"

然後測試程式碼如下：


        private void ButtonBase_OnClick(object sender, RoutedEventArgs e)
        {
            var pathGeometry = PathGeometry.CreateFromGeometry(Geometry.Parse("M0,0 A18.10005249343832,16.00031496062992,60,0,0,-21.634424410598417,-21.472913522584044"));
            var pathFigure = pathGeometry.Figures[0];

            if (pathFigure.Segments[0] is ArcSegment arcSegment)
            {
                var x1 = pathFigure.StartPoint.X;
                var y1 = pathFigure.StartPoint.Y;
                var rx = arcSegment.Size.Width;
                var ry = arcSegment.Size.Height;
                var φ = arcSegment.RotationAngle;
                var fA = arcSegment.IsLargeArc ? 1 : 0;
                var fs = arcSegment.SweepDirection is SweepDirection.Clockwise ? 1 : 0;
                var x2 = arcSegment.Point.X;
                var y2 = arcSegment.Point.Y;


                var (startAngle, swAngle) = GetArcStartAngAndSwAng(x1, y1, x2, y2, fA, fs, rx, ry, φ);
                //算出來接近startAngle為179°，swAngle為-118°
                
                StringBuilder stringPath = new StringBuilder();
                stringPath.Append($"M {x1} {y1}");
                var openXmlArcToArcStrNew = SvgArcToArcStr(stringPath, rx, ry, φ, startAngle, swAngle, pathFigure.StartPoint);
                this.NewPath.Data = Geometry.Parse(openXmlArcToArcStrNew);
            }

        }

然後我們再通過求出來的開始角和擺動角求出之前的那段Arc:

         /// <summary>
        /// OpenXml Arc 轉為SVG Arc 字元串
        /// </summary>
        /// <param name="stringPath">路徑字元串</param>
        /// <param name="rx">橢圓半長軸</param>
        /// <param name="ry">橢圓半短軸</param>
        /// <param name="φ">旋轉角</param>
        /// <param name="stAng">起始角</param>
        /// <param name="swAng">擺動角</param>
        /// <param name="currentPoint">當前坐標</param>
        /// <returns></returns>
        private string SvgArcToArcStr(StringBuilder stringPath, double rx, double ry, double φ, double stAng, double swAng, Point currentPoint)
        {
            const string comma = ",";

            var θ1 = stAng / 180 * Math.PI;
            var Δθ = swAng / 180 * Math.PI;
            //是否是大弧
            var isLargeArcFlag = Math.Abs(Δθ) > Math.PI;
            //是否是順時針
            var isClockwise = Δθ > 0;


            //修復當橢圓弧線進行360°時，起始點和終點一樣，會導致弧線變成點，因此-1°才進行計算
            if (System.Math.Abs(Δθ) == 2 * System.Math.PI)
            {
                Δθ = Δθ - Δθ / 360;
            }

            //獲取終點坐標
            var pt = GetArcArbitraryPoint(rx, ry, Δθ, θ1, φ, currentPoint);

            currentPoint = pt;

            // 格式如下
            // A rx ry x-axis-rotation large-arc-flag sweep-flag x y
            // 這裡 large-arc-flag 是 1 和 0 表示
            stringPath.Append("A")
                   .Append(rx) //rx
                   .Append(comma)
                   .Append(ry) //ry
                   .Append(comma)
                   .Append(φ) // x-axis-rotation
                   .Append(comma)
                   .Append(isLargeArcFlag ? "1" : "0") //large-arc-flag
                   .Append(comma)
                   .Append(isClockwise ? "1" : "0") // sweep-flag
                   .Append(comma)
                   .Append(pt.X)
                   .Append(comma)
                   .Append(pt.Y)
                   .Append(' ');
            return stringPath.ToString();

        }

        /// <summary>
        /// 獲取橢圓任意一點坐標(終點)
        /// </summary>
        /// <param name="rx">橢圓半長軸</param>
        /// <param name="ry">橢圓半短軸</param>
        /// <param name="Δθ">擺動角度(起始角的擺動角度，也就是起始角+擺動角=結束角)</param>
        /// <param name="θ1">起始角</param>
        /// <param name="φ">旋轉角</param>
        /// <param name="currentPoint">起點</param>
        /// <returns></returns>
        private static Point GetArcArbitraryPoint(double rx, double ry, double Δθ, double θ1, double φ, Point currentPoint)
        {
            //開始點的橢圓任意一點的二維矩陣方程式
            var matrixX1Y1 = new Matrix { M11 = currentPoint.X, M21 = currentPoint.Y };

            var matrix1 = new Matrix { M11 = Math.Cos(φ), M12 = -Math.Sin(φ), M21 = Math.Sin(φ), M22 = Math.Cos(φ) };
            var matrix2 = new Matrix { M11 = rx * Math.Cos(θ1), M21 = ry * Math.Sin(θ1) };
            var multiplyMatrix1Matrix2 = Matrix.Multiply(matrix1, matrix2);
            var matrixCxCy = new Matrix { M11 = matrixX1Y1.M11 - multiplyMatrix1Matrix2.M11, M21 = matrixX1Y1.M21 - multiplyMatrix1Matrix2.M21 };

            //終點的橢圓任意一點的二維矩陣方程式
            var matrix3 = new Matrix { M11 = rx * Math.Cos(θ1 + Δθ), M21 = ry * Math.Sin(θ1 + Δθ) };
            var multiplyMatrix1Matrix3 = Matrix.Multiply(matrix1, matrix3);
            var matrixX2Y2 = new Matrix { M11 = multiplyMatrix1Matrix3.M11 + matrixCxCy.M11, M21 = multiplyMatrix1Matrix3.M21 + matrixCxCy.M21 };

            return new Point(matrixX2Y2.M11, matrixX2Y2.M21);
        }

效果如下：

可以看到根據算出來的開始角和擺動角，再帶入計算出來的弧線(關於計算弧線的演算法可以參考我之前的部落格)是跟之前的弧線一致的，也間接驗證了演算法的準確性

求Arc的橢圓圓心

求圓心公式如下：

則程式碼如下：

        /// <summary>
        /// 獲取弧線的橢圓圓心
        /// </summary>
        /// <param name="x1">起點X</param>
        /// <param name="y1">起點Y</param>
        /// <param name="x2">終點X</param>
        /// <param name="y2">終點Y</param>
        /// <param name="fA">優劣弧:1 優弧  0劣弧</param>
        /// <param name="fs">順逆時針繪製：1 順時針  0 逆時針</param>
        /// <param name="rx">橢圓半長軸</param>
        /// <param name="ry">橢圓半短軸</param>
        /// <param name="φ">旋轉角</param>
        /// <returns></returns>
        private static Point GetArcCenterPoint(double x1, double y1, double x2, double y2, double fA, double fs, double rx, double ry, double φ)
        {

            var matrix1 = new Matrix { M11 = Math.Cos(φ), M12 = Math.Sin(φ), M21 = -Math.Sin(φ), M22 = Math.Cos(φ) };
            var matrix2 = new Matrix { M11 = (x1 - x2) / 2, M21 = (y1 - y2) / 2 };
            var matrixX1Y1 = Matrix.Multiply(matrix1, matrix2);

            var x1_ = matrixX1Y1.M11;
            var y1_ = matrixX1Y1.M21;

            var a = Math.Pow(rx, 2) * Math.Pow(ry, 2) - Math.Pow(rx, 2) * Math.Pow(y1_, 2) - Math.Pow(ry, 2) * Math.Pow(x1_, 2);
            var b = Math.Pow(ry, 2) * Math.Pow(y1_, 2) + Math.Pow(ry, 2) * Math.Pow(x1_, 2);

            double c = 0;
            if (fA == fs)
            {
                c = -Math.Sqrt(a / b);
            }
            else
            {
                c = Math.Sqrt(a / b);
            }

            var matrixCx_Cy_ = new Matrix { M11 = c * (rx * y1_ / ry), M21 = c * (-ry * x1_ / rx) };

            var tempMatrix = new Matrix { M11 = Math.Cos(φ), M12 = -Math.Sin(φ), M21 = Math.Sin(φ), M22 = Math.Cos(φ) };
            var multiplyMatrix = Matrix.Multiply(tempMatrix, matrixCx_Cy_);

            var matrixCxCy=new Matrix(){M11 = multiplyMatrix.M11+((x1+x2)/2),M21= multiplyMatrix.M21+((y1+y2)/2) };

            return new Point(matrixCxCy.M11, matrixCxCy.M21);

        }

最終通過上面Svg Arc字元串算出來的橢圓圓心為(-17.42169108128391,-5.368374418803782)

源碼

BlogCodeSample/OpenxmlActToSvgSample at main · ZhengDaoWang/BlogCodeSample

參考

Implementation Notes — SVG 2

Tags:

VirMach 便宜 VPS

QNews

QNews