Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

    Qt QML - FastBlur with rounded corners rectange and background image

    QML and Qt Quick
    2
    4
    2692
    Loading More Posts
    • 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.
    • M
      marcin100 last edited by

      Hello,

      Does anyone know how to make the FastBlur fit the rectangle with rounded corners? I tried many things and failed.

      I tried MaskedBlur with same negative results.

      FastBlur with OpacityMask would work if the mask could be inversed. What I did here is I blurred the whole background and then applied the OpacityMask to the rectangle with round corners. The mask fits nicely with rounded corners but it leaves blur everywhere except the rectangle.
      I am looking for the exact opposite effect. Any ideas?

      Second question: FastBlur - source: ??
      Assume there is a background image (id: background) filling whole screen and a small rectangle in the middle. I noticed that if I set the source: background for FastBlur then the whole blurred backround image is scalled and fitted into the rectangle.
      What is the proper way of having a blured rectangle which could be animated and moved on top of a background image?

      @ Image {
      id: background
      width: parent.width
      height: parent.height
      anchors.rightMargin: 0
      anchors.bottomMargin: 0
      anchors.leftMargin: 0
      anchors.topMargin: 0
      source: "img/Dark_blue_800x480.jpg"
      anchors.fill: parent
      }

      FastBlur
      {
          anchors.fill: button1
          source: background
          radius: 20
      }
      
      Rectangle
      {
          id: button1
          anchors.centerIn: parent
          width: 100
          height: 50
      }
      

      @

      1 Reply Last reply Reply Quote 0
      • M
        marcin100 last edited by

        Hmmm. Is this really not possible? Qt Quick limitation maybe?

        1 Reply Last reply Reply Quote 0
        • Gianluca
          Gianluca last edited by

          Did you try to set source to Rectangle ?
          @

          FastBlur {
          anchors.fill: button1
          source: button1
          radius: 20
          }

          Rectangle {
          id: button1
          visible: false /* IMPORTANT !! The source has to be invisible */
          anchors.centerIn: parent
          width: 100
          height: 50
          }
          @

          Answer to FastBlur source: source can be any visual Qt Quick Item, so it can be a Rectangle. Do not limit yourself to images :-)

          1 Reply Last reply Reply Quote 0
          • M
            marcin100 last edited by

            Yes I tried it, but slightly different. The button1 has to be visible because it also has text which is not blurred, so I created a child rectangle which filled button1 and set this one to invisible and made it a source for FastBlur.
            But nothing was blurred. Maybe because the rectangle I created was two levels a above the background.
            I will do more experiments and report back. Thanks.

            1 Reply Last reply Reply Quote 0
            • First post
              Last post