# [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;
}
//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;
}

• 本文已收录于以下专栏：

举报原因： 您举报文章：[SVG] 根据SVG椭圆弧路径参数计算中心点坐标、起始角度、结束角度的Javascript函数 色情 政治 抄袭 广告 招聘 骂人 其他 (最多只允许输入30个字)