文章目录
- 一、Canvas 绘图坐标系变换示例
Canvas 状态保存机制 中 , 存在两个栈结构 , 分别是 状态栈 和 图层栈 ;
其中 图层栈 又称为 Layer 栈 ;
Canvas 画布中 , 有
- Canvas 自身坐标系
- Canvas 绘图坐标系
一、Canvas 绘图坐标系变换示例
Canvas 绘图坐标系 原始位置如下 , 下面的矩形就是组件本身 , 其 坐标原点就是左上角 ;
该图层是第一图层 ;
Layer 栈中只有该 第一图层 元素
状态栈 中有一个元素 , 就是 Canvas 原始的坐标系信息 ;
调用 Canvas#translate() 方法 , 平移后的画布如下 , 蓝色轮廓是平移后的 Canvas 画布 ;
下面的 黑色区域 ( 原本的 Canvas 范围 ) 蓝色区域 ( 平移后的 Canvas 范围 ) 都在 第一图层 中 ;
在上面的基础上 , 调用 Canvas#save
Layer 栈中只有 第一图层 元素 ;
状态栈 中有量两个元素
再次调用 Canvas#translate
在上面的基础上 , 调用 Canvas#saveLayer 方法 , 新建一个透明图层
绿色矩形区域 所在的位置是 第二图层 ;
Layer 栈中有 第一图层 和 第二图层 两个元素 ;
状态栈 中有量三个元素 , 就是 Canvas 原始的坐标系信息 , 当前平移一次后的坐标信息 , 本次保存的坐标信息 ;