QML How to catch component transformation change

Question

How to subscribe some event which shoot every time when some QML Item-based component transformation was changed? I mean, when changed any of: x, y, width, height, scale, rotation, transform, any of this fields for any parent node through all the hierarchy. May be exist some way to make c++ code for supporting this. I need this for making component which recalculating some fileds when other component transformation was changed.

I need the following code to work properly:

import QtQuick 2.9
import Mirror 1.0
import QtGraphicalEffects 1.0

ShaderEffect {
    id: se

    property var imageSource
    property var maskSource
    property var faceSource

    x: imageSource.x
    y: imageSource.y
    width: imageSource.width
    height: imageSource.height
    rotation: imageSource.rotation
    scale: imageSource.scale
    //transform: imageSource.transform

    property real px
    property real py

    property real ux
    property real uy

    property real vx
    property real vy

    Connections {
        target: face
        onFaceChangeFinish: {
            se.px = (se.mapToItem(maskSource, 0, 0).x) / maskSource.width;
            se.py = (se.mapToItem(maskSource, 0, 0).y) / maskSource.height;
            se.ux = (se.mapToItem(maskSource, se.width, 0).x) / maskSource.width - se.px;
            se.uy = (se.mapToItem(maskSource, se.width, 0).y) / maskSource.height - se.py;
            se.vx = (se.mapToItem(maskSource, 0, se.height).x) / maskSource.width - se.px;
            se.vy = (se.mapToItem(maskSource, 0, se.height).y) / maskSource.height - se.py;
        }
    }

    property var source : ShaderEffectSource {
        sourceItem: imageSource
    }

    property var bodyMask : ShaderEffectSource {
        sourceItem: maskSource
    }

    fragmentShader:
        "
            varying highp vec2 qt_TexCoord0;
            uniform sampler2D source;
            uniform sampler2D bodyMask;
            uniform float px;
            uniform float py;
            uniform float ux;
            uniform float uy;
            uniform float vx;
            uniform float vy;
            void main() {

                vec2 p = vec2(px, py);
                vec2 u = vec2(ux, uy);
                vec2 v = vec2(vx, vy);
                vec2 uv = p + u * qt_TexCoord0.x + v * qt_TexCoord0.y;
                gl_FragColor =
                    texture2D(source, qt_TexCoord0) *
                    (1.0 - texture2D(bodyMask, uv).w);
            }
        "
}

This is the code for OpacityMask supporting any transfomations or hierarchy. I need to substitute section "Connections" with something for handle all the cases of changing of mask or source images transformations. Property binding doesn't help in this case since mapToItem is function.

alez alez · Accepted Answer · 2018-03-22T13:16:32

You can catch changing of any property of QML object in onPropertyChanged{}. Then you can send nofity signal or call slot from C++ object:

ShaderEffect {
  id: root
  signal objectChanged

  onXChanged: root.objectChanged()
  onYChanged: objectFromContext.someSlot()
}

QML How to catch component transformation change

1 Answers