Javascript 如何转换TCanvas->；弧值到SVG弧

我为我的公司编写了一个从图元文件到SVG的转换器（TCanvas->arc）。 我已经完成了转换矩形或其他一些元素，但我不明白如何转换圆弧。 我用JavaScript编写代码。：）

我有一个文件，我在缓冲区中读取它并获取值，但这对您来说是无趣的

因此，我们目前拥有我可以获得的所有值： 点1，点2，开始，结束

这4点已经给出了，从这里我应该画一条弧

    dc->Arc (Point1.x + offset->x,
             Point1.y + offset->y, 
             Point2.x + offset->x,
             Point2.y + offset->y,
              Start.x + offset->x,
              Start.y + offset->y, 
              Ende.x + offset->x, 
              Ende.y + offset->y);

他们当前正在使用此命令绘制圆弧。你不能注意这里的偏移量

如何从给定点获取所有信息，以便在SVG中绘制圆弧

例如，实际值：

         Point1: -50, -6
         Point2: -10, 34
         Start:  -10, 34
         End:    -10, -6 

或

如何获得：大圆弧标志、扫掠标志和旋转，以及必须使用或计算哪些值才能正确绘制

---

我试着画它，看了很多文档，试着用书面形式创作出来。

我突然想出了一些似乎有效的方法。这是基于

我还没有完全测试过

我假设，在

TCanvas

中，（0,0）位于顶部。如果不是，则需要反转扫描和大圆弧标志的逻辑

var svg=document.querySelector（“svg”）；
var debug=svg.getElementById（“调试”）；
功能弧（x1、y1、x2、y2、x3、y3、x4、y4）
{
设xRadius=Math.abs（x2-x1）/2；
设yRadius=Math.abs（y2-y1）/2；
设xCentre=Math.min（x1，x2）+xRadius；
设yCentre=Math.min（y1，y2）+yRadius；
//获取相对于椭圆中心的截距
设startpt=截距椭圆线（x半径，yRadius，x3-x中心，y3-y中心）；
设endpt=截距椭圆线（X半径，Y半径，x4-X中心，y4-Y中心）；
设largeArcFlag=isLargeArc（起始点、结束点）？1:0；
返回['M'，xCentre+startpt.x，yCentre+startpt.y，
'A'，x半径，yRadius，0，largeArcFlag，0，xCentre+endpt.x，yCentre+endpt.y]。连接（''；
}
//查找从中心到x0，y0的椭圆和直线的截距
函数截距椭圆面线（X半径、Y半径、x0、y0）
{
设den=Math.sqrt（xRadius*xRadius*y0*y0+yRadius*yRadius*x0*x0）；
设mult=xRadius*yRadius/den；
返回{x:mult*x0，y:mult*y0}；
}
//如果两条截距线之间的角度大于等于180度，则返回true
功能isLargeArc（开始、结束）
{
让angle=Math.atan2（start.x*end.y-start.y*end.x，start.x*end.x+start.y*end.y）；
返回角>0；
}
设path1=svg.getElementById（“path1”）；
路径1.setAttribute（“d”，弧（1,18,41,58,1,18,1,58））；
让path2=svg.getElementById（“path2”）；
路径2.setAttribute（“d”，弧（-50，-6，-10,34，-10,34，-10，-6））
svg{
宽度：400px；
}
路径{
填充：无；
笔画：红色；
笔画宽度：1px；
}

您缺少一些标记。什么是TCanvas？您在谈论Delphi TCanvas吗？SVG需要弧的起点和终点。首先，你需要找到椭圆和直线之间的两个交点，以及椭圆和终点线之间的两个交点。旋转将始终为0。TCanvas圆弧始终逆时针运行，因此扫描标志始终为0。对于大圆弧标志，您需要找到起点线和终点线之间的角度。如果大于180，大弧标志将为1。Delphi部分在哪里？是TCanvas吗？
isLargeArc
真的不需要
atan2
-它足以使
返回start.x*end.y-start.y*end.x>0
提供相同的结果感谢您的回答。我将直接测试并分享我的结果：你的帖子帮了我很多忙。我怎样才能把这段代码用于TCanvas->Pie？我已经用Pie函数的额外猜测更新了我的答案。
         Point1:  1, 18
         Point2: 41, 58
         Start:  1, 18
         End:    1, 58