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. Mask an image
Forum Updated to NodeBB v4.3 + New Features

Mask an image

Scheduled Pinned Locked Moved QML and Qt Quick
14 Posts 3 Posters 6.9k 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.
  • Y Offline
    Y Offline
    yassine26
    wrote on last edited by
    #1

    Hello,
    I want to hide part of an image with an item or a transparent rectangle.
    Tanks for your help

    1 Reply Last reply
    0
    • sierdzioS Offline
      sierdzioS Offline
      sierdzio
      Moderators
      wrote on last edited by
      #2

      Just create a rectangle/ image object, place it over the one you want to map, apply a higher "z" value than the background (that's usually done automatically for you), and then set it to be transparent ("color: Qt.rgba(0,0,0,0.5) ") - or similar.

      (Z(:^

      1 Reply Last reply
      0
      • Y Offline
        Y Offline
        yassine26
        wrote on last edited by
        #3

        Thank you sierdzio i do it but it doesn't work as i want

        1 Reply Last reply
        0
        • sierdzioS Offline
          sierdzioS Offline
          sierdzio
          Moderators
          wrote on last edited by
          #4

          More text "here":http://qt-project.org/forums/viewthread/1020. Harmattan components seem to have a "masked item":http://harmattan-dev.nokia.com/docs/library/html/qt-components/qt-components-meego-maskeditem.html, and QtQuick2 particle system has masked particles. That is all I know ;)

          (Z(:^

          1 Reply Last reply
          0
          • Y Offline
            Y Offline
            yassine26
            wrote on last edited by
            #5

            Thanks!! So you think there are no simple solutions in qt?

            1 Reply Last reply
            0
            • Y Offline
              Y Offline
              yassine26
              wrote on last edited by
              #6

              quik 1

              1 Reply Last reply
              0
              • sierdzioS Offline
                sierdzioS Offline
                sierdzio
                Moderators
                wrote on last edited by
                #7

                I don't actually know what do you want to achieve, I'm just trying to determine that. You can get good results with an Image element, where you put a PNG as the source (PNG has support for alpha channel).

                (Z(:^

                1 Reply Last reply
                0
                • M Offline
                  M Offline
                  mlong
                  wrote on last edited by
                  #8

                  bq. I want to hide part of an image with an item or a transparent rectangle.

                  Are you saying you want to "cut a hole" in your image so that the background behind it shows through, or are you wanting to obscure a part of your image with another item?

                  Software Engineer
                  My views and opinions do not necessarily reflect those of anyone -- living or dead, real or fictional -- in this universe or any other similar multiverse node. Void where prohibited. Your mileage may vary. Caveat emptor.

                  1 Reply Last reply
                  0
                  • Y Offline
                    Y Offline
                    yassine26
                    wrote on last edited by
                    #9

                    @mlong: i want to mask a part of my image with another item, (this item can move with an animation)

                    1 Reply Last reply
                    0
                    • M Offline
                      M Offline
                      mlong
                      wrote on last edited by
                      #10

                      Hmm. It should be very simple. Sierdzio's original advice should work for you. Can you give a sample of code of how you're trying it?

                      Software Engineer
                      My views and opinions do not necessarily reflect those of anyone -- living or dead, real or fictional -- in this universe or any other similar multiverse node. Void where prohibited. Your mileage may vary. Caveat emptor.

                      1 Reply Last reply
                      0
                      • Y Offline
                        Y Offline
                        yassine26
                        wrote on last edited by
                        #11

                        of course!!
                        @
                        Rectangle {
                        width: 360
                        height: 480
                        color: "transparent"
                        z:3

                        }
                        
                        Image {
                            id: jaune
                            visible: true
                            z: 1
                            source: Utils.setImageSource()// u can use a local pic for test 
                        }
                        

                        @

                        1 Reply Last reply
                        0
                        • M Offline
                          M Offline
                          mlong
                          wrote on last edited by
                          #12

                          Ok. So, that should put an invisible rectangle on top of your Image, which should make the image look just the same as if there were no rectangle...

                          What's it doing? What are you expecting it to do?

                          Software Engineer
                          My views and opinions do not necessarily reflect those of anyone -- living or dead, real or fictional -- in this universe or any other similar multiverse node. Void where prohibited. Your mileage may vary. Caveat emptor.

                          1 Reply Last reply
                          0
                          • Y Offline
                            Y Offline
                            yassine26
                            wrote on last edited by
                            #13

                            I want for example the half of my image is invisible and see the background in place of the hidden part

                            1 Reply Last reply
                            0
                            • M Offline
                              M Offline
                              mlong
                              wrote on last edited by
                              #14

                              Ah, that's what I meant by "cut a hole" so that the background shows through. There's no way to put something on top of an item which would render the item below it transparent. If you just need an edge of the image to be invisible (rather than some arbitrary hole in the middle) you could make the image a child of a Rectangle element which has clip: true enabled, so that by adjusting the x and y offset of your image on the rectangle and the width and height of the rectangle itself, you could mask off any edges. (The rectangle becomes a window that masks off your Image.) I'm not sure what your use case is, but it may be a hack that could move you in the direction you need to go.

                              For example (assume you have an Image that is 100x100):
                              @
                              Rectangle {
                              id: myrect
                              clip: true
                              width: 50
                              height: 50

                              Image {
                              id: myImage
                              source: "..."
                              x: -25
                              y: -25
                              }
                              }
                              @
                              would cut 25 pixels off each side of the Image.

                              Using:
                              @
                              ...
                              Image {
                              id: myImage
                              source: "..."
                              x: 0
                              y: 0
                              }
                              ...
                              @
                              would show the top-left 50x50 pixels of your Image.

                              Anyway, YMMV, but that may help some.

                              Software Engineer
                              My views and opinions do not necessarily reflect those of anyone -- living or dead, real or fictional -- in this universe or any other similar multiverse node. Void where prohibited. Your mileage may vary. Caveat emptor.

                              1 Reply Last reply
                              1

                              • Login

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