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. QML Invert color of image using a mask?
Forum Updated to NodeBB v4.3 + New Features

QML Invert color of image using a mask?

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
2 Posts 1 Posters 1.6k Views 1 Watching
  • 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
    fcarney
    wrote on 10 Feb 2021, 21:53 last edited by
    #1

    In the past one trick to always make a cursor/mask visible was to invert the color of the mask where it overlays on an image. So it did not matter what colors were in the image you could see the cursor. I am not seeing a way to do this with graphical effects. The opacity mask was promising, but I cannot do this for just a portion of the image. (might be able to do a snapshot of the image where the cursor is and do an opacity mask there)

    So, is this going to need to be a custom shader?

    C++ is a perfectly valid school of magic.

    1 Reply Last reply
    0
    • F Offline
      F Offline
      fcarney
      wrote on 10 Feb 2021, 22:29 last edited by fcarney 2 Oct 2021, 22:34
      #2

      Not sure this will work for me, but it is possible in a way (really messy):

      import QtQuick 2.15
      import QtQuick.Window 2.15
      import QtGraphicalEffects 1.15
      
      Window {
          id: root
      
          width: 512
          height: 512
          visible: true
          title: qsTr("Mask Invert")
      
          Image {
              id: mapimage
      
              width: parent.width
              height: parent.height
      
              source: "testimagesquare.png"
      
              visible: true
          }
      
          MouseArea {
              anchors.fill: mapimage
      
              hoverEnabled: true
      
              onPositionChanged: {
                  maskposx = mouseX - masksizew/2
                  maskposy = mouseY - masksizeh/2
              }
          }
      
          Image {
              id: mapimagesub
      
              width: masksizew
              height: masksizeh
      
              source: "testimagesquare.png"
              sourceSize.width: root.width
              sourceSize.height: root.height
      
              sourceClipRect: Qt.rect(maskposx, maskposy, masksizew, masksizeh)
      
              visible: false
          }
      
          property real maskposx: 128
          property real maskposy: 128
          property real masksizew: 128
          property real masksizeh: 128
      
          Image {
              id: subsourceimage
      
              width: masksizew
              height: masksizeh
          }
      
          Image {
              id: maskimage
      
              width: subsourceimage.width
              height: subsourceimage.height
      
              source: "crosshairround.svg"
      
              visible: false
          }
      
          OpacityMask {
              id: opmask
      
              x: maskposx
              y: maskposy
      
              width: masksizew
              height: masksizeh
      
              source: huesat //mapimagesub
              maskSource: maskimage
      
              invert: false
          }
      
          HueSaturation {
              id: huesat
      
              anchors.fill: mapimagesub
      
              source: mapimagesub
      
              hue: 0.5
              //lightness: -0.2
              //saturation: 0.5
      
              visible: false
          }
      }
      
      

      C++ is a perfectly valid school of magic.

      1 Reply Last reply
      0

      1/2

      10 Feb 2021, 21:53

      • Login

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