使用qml实现异形按钮（opacityMask与Mousearea一起使用）

按钮实现如图所示。

实现方式主要是先获取到异形按钮的边框，然后获取异形按钮填充图，可以是任意形状，本文是使用canvas得到（也可以通过图片实现）。

使用opacityMask将按钮按下效果剪切掉，然后按钮区域外的响应区域屏蔽掉。

下面直接贴代码。

import QtQuick 2.0
import QtQuick.Controls 2.2
import QtGraphicalEffects 1.12

Item {
    width:400
    height:400
    Item {
        width: parent.width * 0.9
        height: width
        anchors.centerIn: parent
        Item
        {
            id: _button1
            width: parent.width * 0.5
            height: width
            Canvas
            {
                anchors.fill: parent
                onPaint:
                {
                    var ctx = getContext("2d");
                    ctx.lineWidth = 2;
                    ctx.strokeStyle = "#18aad9";
                    ctx.moveTo(4,4);
                    ctx.lineTo(width - 4,4);
                    ctx.lineTo(width - 4,height / 2 - 4);
                    ctx.arc(width - 4,height - 4,width * 0.5,-Math.PI * 0.5,-Math.PI * 1,true);
                    ctx.lineTo(4,height - 4);
                    ctx.lineTo(4,4);
                    ctx.stroke();
                }
                Item
                {
                    anchors.fill: parent
                    opacity: 0.4
                    MouseArea
                    {
                        id:_button1Button
                        anchors.fill: parent
                    }
                    Rectangle{
                        id:_button1Backgourd
                        visible: false
                        anchors.fill: parent
                        radius: 4
                        color: _button1Button.pressed ? "#215d95":"transparent"
                    }

                    Canvas