虽然工作SVG执行情况的互联网资源管理器可以根据自己的浏览的格式,我来到了一个问题的翻译SVG椭圆弧向浏览椭圆弧。

在浏览一个弧形给出:两个角度对两点在椭圆长半径, 在SVG一个弧形给出:两对坐标上的两点椭圆和尺寸的椭圆边界箱

因此,问题是:如何表达角的两点在椭圆到两对他们的坐标。中间的问题可能是:如何找到中心的一个椭圆形通过的坐标对点的曲线。

更新:让我们有一个先决条件说,一个椭圆形通常是放置(其半径是平行线性轴坐标系统),因此没有转用。

更新:这个问题不相关svg:椭圆元,而不是以"a"椭圆弧命令在svg:路径元(SVG的路径:椭圆曲线电弧命令)

有帮助吗?

解决方案

这样的解决方案是在这里:

的参数化的公式的一个椭圆:

x = x0 + a * cos(t)
y = y0 + b * sin(t)

让我们把已知坐标的两点:

x1 = x0 + a * cos(t1)
x2 = x0 + a * cos(t2)
y1 = y0 + b * sin(t1)
y2 = y0 + b * sin(t2)

现在我们有一个系统的方程式4变量:中心的椭圆(x0/y0)和两个角度t1,t2

让我们减去方程式,以便摆脱中心的坐标:

x1 - x2 = a * (cos(t1) - cos(t2))
y1 - y2 = b * (sin(t1) - sin(t2))

这可以改写的(与产品总和身份的公式)为:

(x1 - x2) / (2 * a) = sin((t1 + t2) / 2) * sin((t1 - t2) / 2)
(y2 - y1) / (2 * b) = cos((t1 + t2) / 2) * sin((t1 - t2) / 2)

让我们来替换一些方程式:

r1: (x1 - x2) / (2 * a)
r2: (y2 - y1) / (2 * b)
a1: (t1 + t2) / 2
a2: (t1 - t2) / 2

然后我们获得简单的公式系统:

r1 = sin(a1) * sin(a2)
r2 = cos(a1) * sin(a2)

除第一个方程式,通过第二种生产:

a1 = arctan(r1/r2)

添加这一结果的第一个公式得出:

a2 = arcsin(r2 / cos(arctan(r1/r2)))

或者简单的(使用组合物的三角和反触发功能):

a2 = arcsin(r2 / (1 / sqrt(1 + (r1/r2)^2)))

甚至更简单的:

a2 = arcsin(sqrt(r1^2 + r2^2))

现在最初的四方程式系统可以解决与易和所有角度以及日食中心的坐标可以找到。

其他提示

椭圆曲线电弧链接包括一个通知你 链接到椭圆弧执行情况的笔记.

在那里,你会找到公式 转换从终端中心参数化.

这里是我的JavaScript执行这些方程, 一个互动演示的椭圆弧路径, 使用 Sylvester.js 执行矩阵,并矢量的计算。

// Calculate the centre of the ellipse
// Based on http://www.w3.org/TR/SVG/implnote.html#ArcConversionEndpointToCenter
var x1 = 150;  // Starting x-point of the arc
var y1 = 150;  // Starting y-point of the arc
var x2 = 400;  // End x-point of the arc
var y2 = 300;  // End y-point of the arc
var fA = 1;    // Large arc flag
var fS = 1;    // Sweep flag
var rx = 100;  // Horizontal radius of ellipse
var ry =  50;  // Vertical radius of ellipse
var phi = 0;   // Angle between co-ord system and ellipse x-axes

var Cx, Cy;

// Step 1: Compute (x1′, y1′)
var M = $M([
               [ Math.cos(phi), Math.sin(phi)],
               [-Math.sin(phi), Math.cos(phi)]
            ]);
var V = $V( [ (x1-x2)/2, (y1-y2)/2 ] );
var P = M.multiply(V);

var x1p = P.e(1);  // x1 prime
var y1p = P.e(2);  // y1 prime


// Ensure radii are large enough
// Based on http://www.w3.org/TR/SVG/implnote.html#ArcOutOfRangeParameters
// Step (a): Ensure radii are non-zero
// Step (b): Ensure radii are positive
rx = Math.abs(rx);
ry = Math.abs(ry);
// Step (c): Ensure radii are large enough
var lambda = ( (x1p * x1p) / (rx * rx) ) + ( (y1p * y1p) / (ry * ry) );
if(lambda > 1)
{
    rx = Math.sqrt(lambda) * rx;
    ry = Math.sqrt(lambda) * ry;
}


// Step 2: Compute (cx′, cy′)
var sign = (fA == fS)? -1 : 1;
// Bit of a hack, as presumably rounding errors were making his negative inside the square root!
if((( (rx*rx*ry*ry) - (rx*rx*y1p*y1p) - (ry*ry*x1p*x1p) ) / ( (rx*rx*y1p*y1p) + (ry*ry*x1p*x1p) )) < 1e-7)
    var co = 0;
else
    var co = sign * Math.sqrt( ( (rx*rx*ry*ry) - (rx*rx*y1p*y1p) - (ry*ry*x1p*x1p) ) / ( (rx*rx*y1p*y1p) + (ry*ry*x1p*x1p) ) );
var V = $V( [rx*y1p/ry, -ry*x1p/rx] );
var Cp = V.multiply(co);

// Step 3: Compute (cx, cy) from (cx′, cy′)
var M = $M([
               [ Math.cos(phi), -Math.sin(phi)],
               [ Math.sin(phi),  Math.cos(phi)]
            ]);
var V = $V( [ (x1+x2)/2, (y1+y2)/2 ] );
var C = M.multiply(Cp).add(V);

Cx = C.e(1);
Cy = C.e(2);

一个椭圆形不能被定义只有两个点。甚至一个圆(一个特殊的套管椭圆)的定义是通过三点。

即使有三点,你会拥有无限的椭圆形通过这三点(认为:旋转)。

注意到一边框建议的一个中心椭圆,并最有可能假定其主要和次要轴平行x,y(或y,x)轴。

中间问题是相当容易的...你不知道。你的工作中心的一个椭圆从bounding box(即,该中心的框该中心的椭圆,只要椭圆,是集中在方框)。

为你的第一个问题,我会看着极形式的椭圆形式,它可以在 维基百科.你会需要作出椭圆的偏心率。

或者你可以的暴力的价值从边界的盒子...工作了,如果一个点在于椭圆和相匹配的角度,并且通过循环访问的每一点在边界框。

许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top