作者: 一去、二三里
个人微信号: iwaleon
微信公众号: 高效程序员
几何变换是 Canvas 提供的一项强大的图形处理能力,主要涉及平移、旋转、缩放。通过运用这些功能,我们有了更大的创作自由度,可以很容易的在 QML 中实现一些出色的游戏效果、动态图表、交互式数据可视化等,从而提升用户体验并营造出令人难忘的视觉效果。
完整的思维导图如下:
绘图状态
在介绍几何变换之前,需要先了解一下另外两个方法 - save() 和 restore(),它们用于保存和恢复绘图上下文的状态。只要你想绘制更复杂的图形,这两个方法几乎是必不可少的。
至于绘图状态,可以将其理解为当前画面所有样式和变换的一个快照。当调用 save() 方法时,当前快照就会被压入堆栈中。如果要恢复快照,需要调用 restore() 从堆栈中弹出上一次保存的状态。每一个绘图状态都包括:
- 当前的变换矩阵(即:平移、旋转和缩放)
- 当前的裁剪区域
- 一些属性值:strokeStyle、fillStyle、fillRule、globalAlpha、lineWidth、lineCap、lineJoin、miterLimit、shadowOffsetX、shadowOffsetY、shadowBlur、shadowColor、globalCompositeOperatio