Qt QML-Canvas深入学习之自定义水波纹控件V2

Qt QML-Canvas深入学习之自定义水波纹控件V2

在前一篇文章中，我们已经实现了一个基础版的水波纹自定义控件。然而，这个控件的效果并不是非常逼真，而且也不能够支持多种颜色、动画特效等功能。因此，在本文中，我们将继续对这个自定义控件进行改进和升级，实现更加逼真和多样化的效果。

1. 实现多种颜色选择

首先，我们需要为这个自定义控件添加多种颜色的选项，使得用户可以根据自己的需求选择不同的颜色。为此，我们可以添加一个字符串类型的属性，用于存储当前选择的颜色值。然后，我们在绘制水波纹时，根据不同的颜色值来设置不同的颜色。具体实现代码如下：

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtGraphicalEffects 1.15

Item {
    property string color: "#007aff" // 默认蓝色
    
    width: 200
    height: 200
    
    Canvas {
        id: canvas
        anchors.fill: parent
        
        onPaint: {
            var ctx = canvas.getContext("2d")
            
            var centerX = canvas.width