Author: Yiqu, Ersanli
Personal Wechat ID: iwaleon
Wechat Official Account: Efficient Programmer
Geometric transformation is a powerful graphics processing capability provided by Canvas, mainly involving translation, rotation, and scaling. By using these functions, we have greater creative freedom, and can easily implement some excellent game effects, dynamic charts, interactive data visualization, etc. in QML, thereby enhancing user experience and creating unforgettable visuals Effect.
The complete mind map is as follows:
drawing state
Before introducing geometric transformations, you need to know about two other methods - save() and restore(), which are used to save and restore the state of the drawing context. As long as you want to draw more complex graphics, these two methods are almost essential.
As for the drawing state, it can be understood as a snapshot of all the styles and transformations of the current screen. When the save() method is called, the current snapshot is pushed onto the stack. If you want to restore the snapshot, you need to call restore() to pop the last saved state from the stack. Each drawing state consists of:
- The current transformation matrix (ie: translation, rotation, and scaling)
- current clipping area
- Some property values: strokeStyle, fillStyle, fillRule, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation