canvas和白鹭引擎中平移，旋转，缩放

Posted 2020-09-29

canvas中的 translate() 和白鹭引擎中的 .x 或者 .y  所导致的平移效果并不是移动 目标元素，而是移动目标元素父亲所在的坐标系。

例如 bgg.translate（100，100） 所表达的含义是将父亲元素所在的坐标系 向右和向下 偏移100 px。

而设置元素大小时 context.fillRect(0, 0, 100, 100) 这里的前两个参数是 真 的 设置偏移量，表示 向右和向下 偏移100px。是设置距离父亲元素的偏移量。

设置旋转，不管是canvas还是白鹭引擎，本质都是旋转的目标元素所依赖的那个坐标系。

canvas中的缩放回同时缩放元素圆点，线条，大小。

究其根本，平移变换、旋转变换、缩放变换都属于坐标变换，或者说是画布变换。因此，缩放并非缩放的是图像，而是整个坐标系、整个画布！就像是对坐标系的单位距离缩放了一样，所以坐标和线条都会进行缩放。仔细想想，这一切貌似挺神奇的。