Печать страницы - [РЕШЕНО] Обрезка увеличивающегося круга.

Здравствуйте, товарищи-сторожилы данного форума, я тут новичёк, как и в Qt.
В общем сам вопрос:
Я решил совместить приятное с полезным и попробовать реализовать Material Design на QML, с qml до этого не работал, щас всё изучаю по ходу дела.
Сейчас появилась проблема, сейчас делаю волны при клике, кто не понял о чём я, то вот пример(http://fian.my.id/Waves/#examples), не сочтите за рекламу, как оформлять ссылки не в курсе.
Ну так вот, получилось генерировать анимацию увеличения круга, поигрался с z-координатой, чтобы не вылезало за текст, но главная проблема, что вылезает за границы кнопки, что не камельфо, как исправить мыслей нет, пробовал opacitymask, но рекурсивные элементы не хочет.
Вот мой код. Заранее спасибо за помощь.

Код:

import QtQuick 2.5
import QtQuick.Window 2.2
import QtGraphicalEffects 1.0
import QtQuick.Controls 1.4

Window
{
    visible: true
    width: 200
    height: 200
    color: "white"
    Rectangle
    {
        id: button
        x:10
        y:10
        z:1
        width: 120
        height: 80
        color: "#26a69a"
        radius: 6
        property string textButton: "Button"
        states:
            State
        {
        name: "Pressed"//Наведение
        PropertyChanges
        {
            target: dropButtonShadow
            radius: 8.0
            horizontalOffset: 2
            verticalOffset: 2
            visible: true
            color: "black"
            opacity: 0.8
        }
    }
    transitions:
        Transition
    {
    reversible: true
    ParallelAnimation
    {
        PropertyAnimation
        {
            properties: "horizontalOffset,verticalOffset,radius"
            duration: 300
            easing.type: Easing.Bezier
        }
    }
}

Text
{
    z:3
    text: button.textButton
    anchors.horizontalCenter: button.horizontalCenter
    anchors.verticalCenter: button.verticalCenter
}
MouseArea
{
    id:buttonArea
    anchors.fill: parent
    hoverEnabled: true
    onPressed:
    {
        button.state = "Pressed"
        wave.initialX = mouseX
        wave.initialY = mouseY
        wave.size = 1.5
        wave.state = "opened"
    }
    onReleased:
    {
        button.state = ""
    }
}

Rectangle {
    id: wave
    z:2
    property bool opened
    property real size: 0
    property real initialX
    property real initialY
    property real abstractWidth: button.width
    property real abstractHeight: button.height
    property real diameter: 2*Math.sqrt(Math.pow(Math.max(initialX, abstractWidth - initialX), 2) + Math.pow(Math.max(initialY, abstractHeight - initialY), 2))

    width: size
    height: size
    radius: size/2
    color: "red"
    states: State {
        name: "opened"
        PropertyChanges {
            target: wave
            size: wave.diameter
        }
    }

    x: initialX - size/2
    y: initialY - size/2


    transitions: Transition {
        id: openedAnim
        from: ""
        to: "opened"
        onRunningChanged: {
            if (!openedAnim.running)
            wave.state = ""
            wave.size = 0
        }
        NumberAnimation {
            property: "size"
            easing.type: Easing.InOutQuad
            duration: 1000
        }
    }
}
}
DropShadow
{
    id: dropButtonShadow
    anchors.fill: button
    source: button
    cached: true
    horizontalOffset: 1
    verticalOffset: 1
    radius: 0.0
    samples: 24
    color: "white"
    transparentBorder: true
}


}

Russian Qt Forum

Qt => Qt Quick => Тема начата: fenixrus от Апрель 09, 2016, 02:03