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

how to calculate the ellipical path coordinates for an SVG Path in javascript?

本文关键字：路径 坐标 SVG 计算 JavaScript      更新时间：2023-09-26

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

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

理想的函数是这样的：

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

一个示例代码（你应该测试它）：

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

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

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

相关文章：