图形编辑器基于Paper.js教程24：图像转gcode的重构，元素翻转，旋转

前段时间在雕刻图片时，旋转图片，翻转图片后，发现生成准确的gcode，虽然尺寸对，但是都是以没有旋转，没有翻转的图片进行生成的。后来思考了一下，发现这真是一个大bug，无论图片如何选择，翻转，我们获取图片的imgdata，都是摆正的。而且还是原始尺寸的图片。之前解析像素使用的是paperjs的的raster.getPixel(localX, localY) 这是非常不聪明的做法，因为每次都获取像素都是经过很多的计算。这个时候最好使用使用原生的获取像素的方式，获取imgdata，然后解析。

经过两个星期的奋战，最终重构了完成了，具体做法就是使用raster的变换矩阵参数，来生成一个高保真的图片。这个图片的内容会可能会被旋转，也会被填充一些空白。

然后再使用一个类似取样的算法，每隔0.1取一个像素，这个0.1要根据原图片与缩放后的图片的比例进行转换。x与y都需要转换，这个过程很像使用canvas压缩图片。将1000* 1000的图片转换为100* 100。

在这里插入图片描述

最近也加上了元素的翻转，和使用输入框对选中的元素进行旋转。

有个比较坑的地方，就是 paperjs的元素默认没有记录旋转角度。想要旋转角度，需要将applyMatrix设置为false。但你会发现，设置false后，元素的真正位置是通过很多属性叠加确定的，这个时候你再直接使用元素的位置，是完全不正确的。坑死…而且变换矩阵里也没有存储当前元素的旋转角度。没办法旋转角度就先做成 相对角度的旋转。你在角度输入框输入45度，进行旋转，再输入45度进行旋转，就会旋转90度。

其中翻转 功能比较简单 左右翻转，上下翻转核心就两个api item.scale(1, -1, new paper.Point(centerX, centerY));

item.scale(-1, 1, new paper.Point(centerX, centerY));

最有又优化了一些 dxf文件的解析，在dxf中，spline这个元素，有可能是2次贝塞尔曲线，之前一直都当作了3次贝塞尔曲线。需要根据dxf中的变量进行动态确定是二次还是三次。

距离上一次写博客已经过了20多天，很久了，其实有很多要写的，但是无奈 实在太忙啦。前段时间梳理了今年要做的事情，唉，那真是的没法说，累死牛马也做不完。更别说还有很多细节需要时间去处理。

还是那句话，再忙也不能忘记提升自己，为自己而努力。这段时间除了工作上忙，下班了还要教资备考。终于在3.8号考试了，放松一下。教资考试，自第一次考试后，搁置了两年，眼看着考过的那一门成绩要过期了，才想起来冲一下，补考剩下的一门，这门考过了，还需要面试通过才能拿到教资证，虽然过程很漫长，也很忙碌，没关系，一步一步走就好啦。千里之行，始于足下。