首页 > 代码库 > canvas和白鹭引擎中平移,旋转,缩放

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

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

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

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

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

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

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

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