Question

在SVG中，使用ellipse标签时很容易创建椭圆形状。使用transform="rotate"属性时，旋转该形状也很容易。

但是，我需要在旋转程度的vanilla Javascript中创建许多椭圆路径，因为稍后我会将它们与animateMotion一起使用。

理想的功能如下：

function ellipsePath(rx, ry, cx, cy, degrees){
  //create the elliptical path

 return "path";
}

Answer 1

示例代码（您应该测试它）：

function ellipsePath(rx, ry, cx, cy, degrees){
  //create the elliptical path
 var numPoints = 10, i, x, y, toRad = Math.PI/180,
     angle = 0, da = degrees/numPoints;
 for (i=0; i<numPoints; i++)
 { 
    x = rx * Math.cos(angle*toRad) + cx;
    y = ry * Math.sin(angle*toRad) + cy;
    angle += da;
   // use x,y points to add to the SVG path
 }
 return "path";
}

注意该函数只是计算椭圆上的numPoints，你应该修改它以将点添加为SVG路径，你也可以改变numPoints（默认为10）

维基百科http://en.wikipedia.org/wiki/Ellipse#General_parametric_form

如何在javascript中计算SVG路径的椭圆路径坐标？

1 个答案: