Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. How to Blend overlapping SVG
Forum Updated to NodeBB v4.3 + New Features

How to Blend overlapping SVG

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
1 Posts 1 Posters 281 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • F Offline
    F Offline
    FS93
    wrote on last edited by FS93
    #1

    I have two SVG files that I am animating, one is a fixed figure that is centered in the screen, while the other is a second shape coming from the bottom of the screen and ending up overlapping a bit on the first one:

    Image {
              id: progressIconFix
              anchors.verticalCenter: parent.verticalCenter
              anchors.horizontalCenter: parent.horizontalCenter
              source: "../../images/Progress2-01.svg"
            }
    Image {
              id: progressIcon
              y: screenHeight
              anchors.horizontalCenter: parent.horizontalCenter
              source: "../../images/Progress1-01.svg"
              states: State {
                name: "visible";
                when: progressIcon.visible;
                PropertyChanges {
                target: progressIcon;
                y: progressIconFix.height + 180;
                }
                }
                transitions: Transition {
                                    from: "";
                                    to: "visible";
                                    reversible: true; 
                                    ParallelAnimation {
                                        NumberAnimation {
                                            properties: "y";
                                            duration: 1050;
                                            easing.type: Easing.InOutQuad;
                                        }
                                    }
                                }
            }
    

    I would like to make it so that when the second shape starts overlapping with the fixed one, the overlapped area (only the overlap) between the two gets blended with a "multiply" effect. If I use:

            Blend {
            anchors.fill: progressIconFix
            source: progressIconFix
            foregroundSource: progressIcon
            mode: "multiply"
            }
    

    The moving shape gets blended since the beginning in its entirety, but I would really like this effect to happen only when it overlaps the fixed one and only on the overlapping area of the two.

    So the end result would be something like this:

    animate.gif

    Thanks in advance for your help!

    1 Reply Last reply
    0

    • Login

    • Login or register to search.
    • First post
      Last post
    0
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Get Qt Extensions
    • Unsolved