图形编辑器基于Paper.js教程31：解析gcode来模拟机器加工过程，查看gcode运动轨迹

背景

前一段时间在优化图像转gcode时，发现目前没有一个比较好的gcode运动仿真功能，lightburn可以支持gcode的导入，但无法查看gcode所控制的运动轨迹，并且无法查看雕刻一个图元时，起点和终点在哪里。查看起点和终点有时是特别重要的，这在使用相对定位雕刻图片时。雕刻完成后，终点在图片的左侧还是右侧，在那个顶点，这非常重要。

所以简单做了一个gcode的运动仿真demo。下面来看一下。

竞品调研

目前lightburn和xtool，wecreat都有自己的运动仿真，
下面先看一下竞品是如何实现的。

lightburn gcode 运动仿真 预览

lightburn 右键，点击预览，可以查看gcode运动仿真。

可以设置速度，运行，是否显示空轨迹，保存图像。
黑色为切割，红线为机器空走的轨迹。

xtool的gcode 运动仿真，预览

xtool的gcode仿真是点击加工后，直接进入预览页面，是一个必须的流程。

在加工预览页面，可以播放动画，调整速度，显示移动路径。视图的放大和缩小。

wecreate的 必须连接机器才能查看预览，暂时无法演示，想看的可以去看官方资料。

技术方案

要实现雕刻效果仿真，就需要要先将作品，也就是画布上的所有图元转换成gcode，然后再分析gcode，将每一条gcode转换成画布上的线条或者点。如果直接使用图元转换为雕刻效果仿真，那个是不准确的。控制机器的是gcode，如果直接将图元转换为雕刻效果，那么移动路径和起点终点都无法查看。

技术方案很清晰，
图元转gcode，gcode转线条，将gcode的运动轨迹描绘出来我们需要使用canvas，gcode描绘的移动，在canvas上都是一个线段。

将gcode转换为线段，我们就需要一些gcode的知识
包括，相对位置，绝对位置，G0，G1，回原点，如果当前行没有功率和速度，则默认取前一行的。

查看这篇文章你可以了解一下 gcode的基本知识 https://blog.csdn.net/github_35631540/article/details/136474034

技术实现

图元转gcode 这部分很早就实现了，所以gcode的仿真效果在实现路线上只有两个难点，

1: 将gcode解析为格式化数据
2: 使用上一步的格式化数据在canvas上画线段

解析gcode需要自己实现，
在canvas上画线段，可以借住一些开源库，如pixi，如fabircjs，直接使用原生canvas也是可以的。有一个重要的事情还需要考虑，那就是gcode 可能有几十万，或者上百万行。那么大数据量，要按照顺序解析，格式化，然后画线条，性能一定要处理好。

有个核心函数需要实现，一是解析格式化gcode，二是使用格式化的数据来画线段。

解析，格式化gcode

解析gcode 需要注意以下细节
1: gcode是一行一行的书写，每一行是一个单独的指令
2: 需要跳过空行和注释
3: 记录当前的处理坐标模式指令，是绝对坐标还是相对坐标
4: x，y，z坐标，速度，功率的提取
5: 注意特殊指令 有时用 G1 X10 S0 来表明是空走
6: $H 归位，回原点

需要解析的指令 G90，G91，G0，G1， S，X，Y（F速度暂时没有考虑）

格式化后的数据格式是这样的

[
  { x: 10, y: 20, type: false, gcode: 'G0 X10 Y20' },
  { x: 30, y: 20, type: true,  gcode: 'G1 X30 S100' },
  { x: 5, y: -5, type: true,  gcode: 'G1 X5 Y-5' }
]

type属性表明是否打开激光，true表明是雕刻，false表明是空走。
x，y是坐标，没有设置线条的速度。

基于格式化的数据 画线段

通过上面的流程，我们已经获取了简单的格式化的数据
以上面的三行数据来解释一下 线条该如何画

[
  { x: 10, y: 20, type: false, gcode: 'G0 X10 Y20' },
  { x: 30, y: 20, type: true,  gcode: 'G1 X30 S100' },
  { x: 5, y: -5, type: true,  gcode: 'G1 X5 Y-5' }
]

第一条的gcode是 G1 ，type为false，那么从当前的点，走到x10，y20，应该是关闭激光的，我们使用红色来表明机器的空走状态。
第二条是type为true，那么我们从x10，y20到x20，y20 的线段 应该使用黑色，表明雕刻。
以此类推。type为true，使用黑线，type为false，使用红线。

效果图：
绘制过程的动画

完整效果

复杂运动路径

一个6M的gcode，有48万行的gcode
作品图

仿真图

作品里一旦存在了图片，gcode随便就能上几十万行，这部分可以尝试使用webworker来多线程渲染。此外案例还不是完成品，有些线条的颜色并不准确。不过有了这个demo后，调试gcode以及查看作品仿真效果确实方便很多。

总结

祝大家在代码的世界里玩的愉快。