根据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+摆动角Δθ  

那么则有如下公式:

根据SVG Arc求出其开始角、摆动角和椭圆圆心

代码如下:

/// <summary> /// 获取弧线的开始角度和摆动角度 /// </summary> /// <param>起点X</param> /// <param>起点Y</param> /// <param>终点X</param> /// <param>终点Y</param> /// <param>优劣弧:1 优弧 0劣弧</param> /// <param>顺逆时针绘制:1 顺时针 0 逆时针</param> /// <param>椭圆半长轴</param> /// <param>椭圆半短轴</param> /// <param>旋转角</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,然后还有以下公式求开始角和摆动角:

根据SVG Arc求出其开始角、摆动角和椭圆圆心

那么代码如下:

//求开始角 //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"

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zgyxgd.html