下面的canvas.translate，scale是怎么完成镜像的？ - javascript吧 - RAT

下面的canvas.translate，scale是怎么完成镜像的？

level 7

从入门☞放弃楼主

位置1的三角形是原始的，调用flipHorizontally后，第一步就是translate将画布原点平移到坐标(around, 0)，此时x轴是水平向右的，调用scale(-1, 1)后，x轴翻转成水平向左，我的问题是第三步translate(-around, 0)是怎么把2变换至3的？哪里不对？

2023年07月30日 03点07分 1

level 11

Darren♂

有没有一种可能，scale(-1, 1)就已经完成图像翻转了，最后那个translate(-around, 0)只是把原点移动回去保证坐标系和调用flipHorizontally以前一样

2023年07月30日 09点07分 2

从入门☞放弃

不是在scale之后画的图像才会翻转吗？而这里图是在scale之前就有的，为啥是-around，而且x轴方向又向→了？

2023年07月30日 11点07分

Darren♂

@从入门☞放弃 scale是伸缩变换，数字越小就压得越扁，负值是压成0以后再反向拉伸，绝对值为1意味着大小不变，所以-1其实就起到了翻转的作用，这样解释总能听得懂吧

2023年07月30日 13点07分

从入门☞放弃

@Darren♂ 我知道是缩放，但是scale翻转不是在scale之后画的图才被翻转吗，之前的不会？

2023年07月30日 13点07分

Darren♂

@从入门☞放弃之前画的内容当然不会受影响，画下去的内容覆水难收

2023年07月30日 13点07分

level 7

从入门☞放弃楼主

translate是让原点移动，这里从(0，0)移动到(around, 0)，(around, 0)就成了原点，那如何确定(around, 0)呢？

2023年07月30日 12点07分 3

Darren♂

楼主要是真想搞懂里面的原理建议去学一下线性代数和图形学，这些操作都是针对于“画笔”的变换矩阵的，不是针对于“图形”或者“画布”的，这代码里一系列的操作本质上都是变换矩阵的相乘

2023年07月30日 13点07分

1