[SVG] 根据SVG椭圆弧路径参数计算中心点坐标、起始角度、结束角度的Javascript函数

原创 2012年09月08日 16:12:24

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;
    }


iOS 获取圆环终点位置的坐标方法 (UIBezierPath 终点位置)

目标是下图的情况: 画一个圆弧,在圆弧结束位置放置一个红色圆点 这需要先假想一个坐标系效果如下 由于贝塞尔曲线是顺时针方向绘制的,所以可以顺时针想像成四个象限 获取位置方法步骤: 1、确定所在...
  • u013282507
  • u013282507
  • 2016年09月22日 20:53
  • 3037

[SVG] 根据SVG椭圆弧路径参数计算中心点坐标、起始角度、结束角度的Javascript函数

SVG spec 1.2以及之前的版本标准中,都只有一种绘制椭圆弧的方式,即以起点、终点、长半轴、短半轴、大小弧标记、顺逆时针方向标记、倾角为参数来确定一段弧。这个方法很强大并灵活,可绘制任意的椭圆弧...
  • luqin1988
  • luqin1988
  • 2013年01月30日 10:29
  • 1208

SVG画矩形、半圆、三角形

  • dusea
  • dusea
  • 2015年10月29日 16:40
  • 5336

cocos2d-x2.2实现椭圆运动,参数为中心点坐标和长半轴、短半轴

CCAction运动中没有实现椭圆运动或者圆周运动,于是在网上找了很多相关帖子,有一个CCCircleBy可以实现圆周运动,但是当使用CCRepeatForever循环运动时,总是会卡一下,所以在网上...
  • u011874528
  • u011874528
  • 2014年12月03日 14:51
  • 638

js鼠标识别器 javascript鼠标识别器坐标 移动速度 方向 角度

  • 2010年04月15日 10:02
  • 4KB
  • 下载

把空间椭圆曲线的参数方程变成坐标平面上的隐函数方程

目标空间椭圆曲线: ⎧⎩⎨⎪⎪⎪⎪⎪⎪⎪⎪⎪⎪⎪⎪x(t)=y(t)=z(t)=1425(−177t∓219−−√875−3t(27t+50)−−−−−−−−−−−−−−−√+450)1425(15...
  • lcfactorization
  • lcfactorization
  • 2015年08月23日 13:28
  • 973

WPF 多个物体绕着椭圆转,Timer计算法(改变角度)

  • 2011年05月05日 00:46
  • 328KB
  • 下载

用C#窗体画一个可以指定角度的倾斜椭圆(非旋转坐标系方法)

  • 2015年08月01日 23:24
  • 59KB
  • 下载

(6)SVG中所用到的形状简介------椭圆

标签 标签可用来创建椭圆。椭圆与圆很相似。不同之处在于椭圆有不同的 x 和 y 半径,而圆的 x 和 y 半径是相同的。请把下面的代码拷贝到记事本,然后把文件保存为 "ellipse1.svg"。把此...
  • sunchaoenter
  • sunchaoenter
  • 2011年07月06日 17:27
  • 839

[c++学习笔记]反汇编角度看变量名和引用作为函数参数

1:默认情况下即以变量名作为函数参数时进行值传递 从反汇编中可以看出以下几点: 1:默认情况下进行的是值传递(mov) 2: 函数调用中参数的传递是从右向左依次传递的 2:以引用传...
  • ZongYinHu
  • ZongYinHu
  • 2015年07月18日 11:42
  • 897
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:[SVG] 根据SVG椭圆弧路径参数计算中心点坐标、起始角度、结束角度的Javascript函数
举报原因:
原因补充:

(最多只允许输入30个字)