【Openxml】将Openxml的椭圆弧线arcTo转为Svg的椭圆弧线

本文将介绍如何将OpenXml的actTo转为Svg的弧线(a)

OpenXml的artTo

首先下面是一段OpenXml的arcTo弧线

<arcTo wR="152403" hR="152403" stAng="cd4" swAng="-5400000" />

假设我们当前的点是(0,0)，这时候我们已知的信息如下：

当前点坐标：（x1,y1)=(0,0)
椭圆的半径：半长轴 rx=wR=152403，半短轴 ry=hR=152403
起始角到结束角的夹角：起始角θ1=stAng=cd4，夹角Δθ=swAng,结束角θ2=θ1+Δθ
是否优(大)弧：fA=|Δθ|>Π(180°)
顺逆时针：fS=|Δθ|>0°

目前Svg的椭圆弧线参数字符串为以下：

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

其中涉及到的参数：

参数	说明	备注
rx	椭圆半长轴	已知：rx=wR=152403
ry	椭圆半短轴	已知：ry=hR=152403
x-axis-rotation	椭圆相对于坐标系的旋转角度，角度数而非弧度数	已知：0
large-arc-flag	是否优(大)弧：0否，1是	已知：fA=\|Δθ\|>Π(180°)
sweep-flag	绘制方向：0逆时针，1顺时针	已知：fS=\|Δθ\|>0°
x	圆弧终点的x坐标	未知
y	圆弧终点的y坐标	未知

因此实际上，我们需要求出的则是圆弧终点坐标就能够完成最终换算到Svg椭圆弧线字符串了

求椭圆弧上任意一点的二维矩阵方程式

以下是我从W3C的SVG官方文档中获取到的关于椭圆任意一点的二维矩阵方程式：

因此的存在以下两个(开始点和终点)椭圆任意一点的二维矩阵方程式：

其中涉及到的参数：

参数	说明	备注
(x1,y1)	当前坐标	已知：(0,0)
(x2,y2)	终点坐标	未知
φ	椭圆相对于坐标系的旋转角度	已知：0°
θ1	起始角	已知：stAng
Δθ	起始角到结束角的夹角	已知：swAng
(cx,cy)	椭圆中心坐标点	未知
fA	是否优(大)弧	已知：fA=\|Δθ\|>Π(180°)
fS	绘制方向	已知：fS=Δθ>0°

因此推导公式如下:

步骤1：

因为开始点的椭圆任意一点的二维矩阵方程式为

所以能够得出两行一列矩阵CxCy为：

步骤2：

因为终点的椭圆任意一点的二维矩阵方程式为

因此将矩阵CxCy带入到终点点的椭圆任意一点的二维矩阵方程式：

代码部分

在写代码之前，我们需要安装一些所需要用到的库，Openxml单位换算为Pixel的库和矩阵运算用到的库：

通过nuget包的控制台执行以下命令：

Openxml单位换算库

Install-Package dotnetCampus.OpenXmlUnitConverter -Version 1.5.1

矩阵运算库

Install-Package MathNet.Numerics -Version 5.0.0-alpha02

然后正式开始我们的代码,我们通过WPF应用窗体来展示效果：

前端xaml代码：

<Window x:Class="OpenxmlActToSvgSample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:OpenxmlActToSvgSample"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Path x:Name="Path" Stroke="Blue" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </Grid>
</Window>

后端cs代码：

        public MainWindow()
        {
            InitializeComponent();

            //Openxml的360° circle
            const double c = 21600000d;
            //circle divide 4
            var cd4 = c / 4;

            //<arcTo wR="152403" hR="152403" stAng="cd4" swAng="-5400000" />
            var wR = 152403;
            var hR = 152403;
            var stAng = cd4;
            var swAng = -5400000d;

            StringBuilder stringPath=new StringBuilder();
            var currentPoint=new Point(0, 0);
            stringPath.Append($"M {currentPoint.X} {currentPoint.Y}");

            ParseOpenxmlArcTo(stringPath, wR, hR, stAng, swAng, currentPoint);
            this.Path.Data=Geometry.Parse(stringPath.ToString());
        }


          private Point  ParseOpenxmlArcTo(StringBuilder stringPath, double wR, double hR, double stAng, double swAng, Point currentPoint)
        {
            const string comma = ",";

            //将Openxml的角度转为真实的角度
            var θ1 = new Angle((int)stAng).ToRadiansValue();
            var Δθ = new Angle((int)swAng).ToRadiansValue();
            //旋转角
            var φ = 0d;
            //是否是大弧
            var isLargeArcFlag = Math.Abs(Δθ) > Math.PI;
            //是否是顺时针
            var isClockwise = Δθ > 0;


            //修复当椭圆弧线进行360°时，起始点和终点一样，会导致弧线变成点，因此-1°才进行计算
            if (System.Math.Abs(Δθ) == 2 * System.Math.PI)
            {
                Δθ = Δθ - Δθ / 360;
            }

            var rx = new Emu(wR).ToPixel().Value;
            var ry = new Emu(hR).ToPixel().Value;

            //获取终点坐标
            var pt = GetArBitraryPoint(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 currentPoint;

        }

         /// <summary>
        /// 获取椭圆任意一点坐标
        /// </summary>
        /// <returns></returns>
        private static Point GetArBitraryPoint(double rx, double ry, double Δθ, double θ1, double φ, Point currentPoint)
        {
            //开始点的椭圆任意一点的二维矩阵方程式
            var matrixX1Y1 = DenseMatrix.OfArray(new double[2, 1]
            {
                { currentPoint.X},
                { currentPoint.Y}
            });

            var matrix1 = DenseMatrix.OfArray(new double[2, 2]
            {
            { Math.Cos(φ),-Math.Sin(φ)},
            { Math.Sin(φ),Math.Cos(φ)}
            });
            var matrix2 = DenseMatrix.OfArray(new double[2, 1]
            {
                { rx*Math.Cos(θ1)},
                { ry*Math.Sin(θ1)}
            });
            var matrixCxCy = matrixX1Y1 - (matrix1 * matrix2);

            //终点的椭圆任意一点的二维矩阵方程式
            var matrix3 = DenseMatrix.OfArray(new double[2, 1]
            {
                { rx*Math.Cos(θ1+Δθ)},
                { ry*Math.Sin(θ1+Δθ)}
            });

            var matrixX2Y2 = matrix1 * matrix3 + matrixCxCy;

            return new Point(matrixX2Y2.Values[0], matrixX2Y2.Values[1]);

        }

效果如下：