Uploaded image for project: 'Qt'
  1. Qt
  2. QTBUG-9008

A Rectangle with radius doesn't clip a child Image in rounded corners

XMLWordPrintable

      When using an Image element inside a Rectangle with a radius for rounded corners, and the Image fills anchors to the Rectangle - the Image corners are not clipped. The following example shows a blue rectangle with rounded corners, hosting an image that once loaded over the network will fill the entire rectangle;

      import Qt 4.6
      
      Rectangle {
          width: 300
          height: 100
      
          Row {
              width: parent.width
              height: 60
              Rectangle {
                  id: rectangle2
                  height: parent.height
                  width: 60
                  color: "#4682b4"
                  radius: 10
                  clip: true
      
                  Image {
                      anchors.fill: parent
                      source: "http://chaos.troll.no/~hhartz/hhartz_mirror_small.png"
                  }
              }
      
              Text {
                  id: text1
                  height: parent.height
                  text: "Shady, Slim"
                  verticalAlignment: "AlignVCenter"
                  horizontalAlignment: "AlignHCenter"
              }
          }
      }
      

        No reviews matched the request. Check your Options in the drop-down menu of this sections header.

            srutledg Shawn Rutledge
            hhartz Henrik Hartz (closed Nokia identity) (Inactive)
            Votes:
            0 Vote for this issue
            Watchers:
            2 Start watching this issue

              Created:
              Updated:
              Resolved:

                There are 2 open Gerrit changes