0

我正在尝试找出一种将 g 代码解释为 SVG 图像的方法。我可以想象很容易使用坐标来绘制直线，但我正在努力使用弧线。我不知道如何将 IJ 系统解释为 SVG 中的弧线。

(ORIGIN=BOTTOM LEFT)
(METRIC)
G71
(RELATIVE)
G91
M16
(PART 1)
G00X-74.7Y585.5
M15
G01X-1.0Y0.0
G02X-735.2Y736.2I0.4J735.6
G01X10.0Y0.0
G01X0.0Y75.0
G01X501.2Y0.0
G01X0.0Y-75.0
G01X10.0Y0.0
G03X215.0Y-215.0I214.4J-0.6
G01X0.0Y-10.0
G01X75.0Y0.0
G01X0.0Y-501.2
G01X-75.0Y0.0
G01X0.0Y-10.0
M16
(PARK)

这是我对上面代码的理解，它是相对的，所以我将从 -74,585 开始，然后移动 -1,0，然后开始一个弧线，该弧线在 -735.2,736.2 的起点处远离弧线的起点。弧中心将基于 I 和 J 信息。由于这是相对的，I 和 J 是否相对于弧的起点？

对于弧的中心，这将如何转化为 svg 弧？我是否认为对于 SVG 贝塞尔曲线 (Q)，控制点位于曲线的“外部”，而对于 g 代码，中心位于内部？

我可以解析我拥有的数据并生成以下 SVG：

<svg viewBox="-820 -35 4283 1441"> 
<path class="path" d="M-74,585 -75,585" style="stroke:black;stroke-width:5"></path>
<path class="path" d="M-75,585   Q  -810 1321  -810 1321" style="fill:none;stroke:black;stroke-width:5"></path>
<path class="path" d="M-810 1321 -800,1321" style="stroke:black;stroke-width:5"></path>
<path class="path" d="M-800,1321 -800,1396" style="stroke:black;stroke-width:5"></path>
<path class="path" d="M-800,1396 -299,1396" style="stroke:black;stroke-width:5"></path>
<path class="path" d="M-299,1396 -299,1321" style="stroke:black;stroke-width:5"></path>
<path class="path" d="M-299,1321 -289,1321" style="stroke:black;stroke-width:5"></path>
<path class="path" d="M-289,1321  Q  -74 1106   -74 1106  " style="fill:none;stroke:black;stroke-width:5"></path>
<path class="path" d="M-74 1106 -74,1096" style="stroke:black;stroke-width:5"></path>
<path class="path" d="M-74,1096 1,1096" style="stroke:black;stroke-width:5"></path>
<path class="path" d="M1,1096 1,595" style="stroke:black;stroke-width:5"></path>
<path class="path" d="M1,595 -74,595" style="stroke:black;stroke-width:5"></path>
<path class="path" d="M-74,595 -74,585" style="stroke:black;stroke-width:5"></path>
<path class="path" d="M-74,585 -74,585" style="stroke:red;stroke-width:10"></path>
</svg>

我没有添加我用来生成它的脚本（用 PHP 编写），因为它很冗长并且从数据库中提取数据，所以并没有真正的帮助。方向是错误的，但我可以通过对整个 SVG 进行变换来解决这个问题。负责圆弧的线中有 Q，这是我一生无法根据 g 代码中点的 IJ 值在数学上计算出来的控制点值。任何帮助或建议将不胜感激。

4

1 回答 1

2

G02您无法将or命令所描述的圆弧转换为命令所描述G03的忠实二次贝塞尔曲线Q- 它充其量只是一个近似值。另外真的没有必要。SVG 路径命令包括A描述椭圆弧的命令。它的语法是：

A rx ry x-axis-rotation large-arc-flag sweep-flag x y (absolute notation)
a rx ry x-axis-rotation large-arc-flag sweep-flag x y (relative notation)

这比您需要的要复杂得多，因为 in 也可以描述旋转的椭圆弧。在您的情况下，描述椭圆半径的前两个参数是相同的，第三个是 0，因为旋转的圆不会改变。

首先需要做的是从起点到旋转中心的距离来确定圆的半径。中心坐标是相对于那个起点的，所以你可以简单地写

$r = hypot($I, $J)

需要大圆弧标志和扫掠标志来区分四种可能的解决方案来绘制具有一定半径的圆弧。大圆弧标志描述圆弧是否覆盖超过 180 度。如果我理解CNC机械的限制权利，这是不可能的。因此，该值可能应该是0(false) - 如果我错了，请纠正我。扫描标志描述了弧是顺时针还是逆时针。因此，对于命令，它的值为1(true)，对于G02命令，它的值为0(false) G03。

如果使用 relativea命令，最终的 x 和 y 坐标与X和Y值相同。

一起，G代码命令

G02X-735.2Y736.2I0.4J735.6

可以写成路径命令d属性

d="M-75,585 a 735.6001 735.6001 0 0 1 -735.2,736.2"

l最后一点，如果您使用该命令，您还可以使用相对坐标编写直线。G01X-1.0Y0.0都可以写成

d="M-74,585 -75,585"

和

d="M-74,585 l -1,0"

根据您的要求，您甚至可以在一个<path>元素中组合多行，如下所示：

d="M-74,585 l -1,0 m 0,0 a 735.6001 735.6001 0 0 1 -735.2,736.2 m 0,0 l 10,0 ..."

m 0,0说新行应该从前一行结束的地方开始。或者，您也可以绘制一条带有多个线段的连续线：

d="M-74,585 l -1,0 a 735.6001 735.6001 0 0 1 -735.2,736.2 l 10,0 ..."
于 2022-03-02T18:07:32.223 回答