控件背景图图形渲染ColorOverly

刚接触QT/QML这块没多久，竟然碰到了就记下来吧，在做界面跳转时，想点击此图形就改变颜色，不需要两张图，该怎么做呢，这就可以用到Qt库自带的ColorOverly了，需要用到的类为:
import QtGraphicalEffects 1.0
官方介绍是这样的：

意思为这种效果类似于把彩色玻璃放在灰度图像上的效果。覆盖层的颜色以RGBA格式给出。
放出官方的例子吧：
import QtQuick 2.0
import QtGraphicalEffects 1.0

Item {
    width: 300
    height: 300

    Image {
        id: bug
        source: "images/butterfly.png"
        sourceSize: Qt.size(parent.width, parent.height)
        smooth: true
        visible: false
    }

    ColorOverlay {
        anchors.fill: bug
        source: bug
        color: "#80800000"
    }
}

就是用另外的颜色将原来的图形的颜色覆盖。此外，我自己也写了一个自定义控件，可以参考下：
import QtQuick 2.3
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.4
import QtGraphicalEffects 1.0
//import QGroundControl.Palette 1.0

Item {
property color color: “white” // Image color

property alias asynchronous:        image.asynchronous
property alias cache:               image.cache
property alias fillMode:            image.fillMode
property alias horizontalAlignment: image.horizontalAlignment
property alias mirror:              image.mirror
property alias paintedHeight:       image.paintedHeight
property alias paintedWidth:        image.paintedWidth
property alias progress:            image.progress
property alias smooth:              image.smooth
property alias mipmap:              image.mipmap
property alias source:              image.source
property alias sourceSize:          image.sourceSize
property alias status:              image.status
property alias verticalAlignment:   image.verticalAlignment

width:  image.width
height: image.height

Image {
    id:                 image
    smooth:             true
    mipmap:             true
    antialiasing:       true
    visible:            false
    fillMode:           Image.PreserveAspectFit
    anchors.fill:       parent
    sourceSize.height:  height
}

ColorOverlay {
    anchors.fill:       image
    source:             image
    color:              parent.color
}

}