Author: Yiqu, Ersanli
Personal Wechat ID: iwaleon
Wechat Official Account: Efficient Programmer
In QML development, Canvas is a very powerful drawing element, which can realize various complex graphic effects, and one of the important features is clipping. Its principle is to use a path or other shape to define a closed area, limit the drawing operation to this area, and hide the part beyond this area.
By flexibly using clipping, we can create various customized areas to create a unique drawing experience, such as: circular images, heart-shaped wavy progress balls, etc.
The complete mind map is as follows:
Basic steps of cropping
Implementing Canvas clipping mainly involves the following steps:
- Call beginPath() to start a new path;
- Call any combination of lineTo(), moveTo(), arc(), etc. and closePath() to define the clipping path;
- Call clip() to create a clipping region from the current path (any part outside the clipping path is not displayed).
Let's demonstrate the specific process and see how the clipping path modifies the way the image is displayed:
