[SVG] 根据SVG椭圆弧路径参数计算中心点坐标、起始角度、结束角度的Javascript函数
SVG spec 1.2以及之前的版本标准中，都只有一种绘制椭圆弧的方式，即以起点、终点、长半轴、短半轴、大小弧标记、顺逆时针方向标记、倾角为参数来确定一段弧。这个方法很强大并灵活，可绘制任意的椭圆弧。有时候我们需要计算圆弧的圆心和起始角度、结束角度，虽然标准官方文档给出了计算公式的描述，但是没有给出直接的代码。我根据标准文档以及网上的资料，写了一个Javascript函数来做这件事。
// svg : [A | a] (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+ /* x1 y1 x2 y2 fA fS rx ry φ */ function radian( ux, uy, vx, vy ) { var dot = ux * vx + uy * vy; var mod = Math.sqrt( ( ux * ux + uy * uy ) * ( vx * vx + vy * vy ) ); var rad = Math.acos( dot / mod ); if( ux * vy - uy * vx < 0.0 ) rad = -rad; return rad; } //conversion_from_endpoint_to_center_parameterization //sample : convert(200,200,300,200,1,1,50,50,0,{}) function convert(x1, y1, x2, y2, fA, fS, rx, ry, phi) { var cx,cy,theta1,delta_theta; if( rx == 0.0 || ry == 0.0 ) return -1; // invalid arguments var s_phi = Math.sin( phi ); var c_phi = Math.cos( phi ); var hd_x = ( x1 - x2 ) / 2.0; // half diff of x var hd_y = ( y1 - y2 ) / 2.0; // half diff of y var hs_x = ( x1 + x2 ) / 2.0; // half sum of x var hs_y = ( y1 + y2 ) / 2.0; // half sum of y // F6.5.1 var x1_ = c_phi * hd_x + s_phi * hd_y; var y1_ = c_phi * hd_y - s_phi * hd_x; var rxry = rx * ry; var rxy1_ = rx * y1_; var ryx1_ = ry * x1_; var sum_of_sq = rxy1_ * rxy1_ + ryx1_ * ryx1_; // sum of square var coe = Math.sqrt( ( rxry * rxry - sum_of_sq ) / sum_of_sq ); if( fA == fS ) coe = -coe; // F6.5.2 var cx_ = coe * rxy1_ / ry; var cy_ = -coe * ryx1_ / rx; // F6.5.3 cx = c_phi * cx_ - s_phi * cy_ + hs_x; cy = s_phi * cx_ + c_phi * cy_ + hs_y; var xcr1 = ( x1_ - cx_ ) / rx; var xcr2 = ( x1_ + cx_ ) / rx; var ycr1 = ( y1_ - cy_ ) / ry; var ycr2 = ( y1_ + cy_ ) / ry; // F6.5.5 theta1 = radian( 1.0, 0.0, xcr1, ycr1 ); // F6.5.6 delta_theta = radian( xcr1, ycr1, -xcr2, -ycr2 ); var PIx2 = Math.PI * 2.0; while( delta_theta > PIx2 ) delta_theta -= PIx2; while( delta_theta < 0.0 ) delta_theta += PIx2; if( fS == false ) delta_theta -= PIx2; var outputObj = { /* cx, cy, theta1, delta_theta */ cx : cx, cy : cy, theta1 : theta1, delta_theta : delta_theta } console.dir(outputObj); return outputObj; }