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