Rounded Image Corners
-
Hi there,
i'm trying to create a rectangle with an image in it. The rectangle should have rounded corners.
My code looks like this:
@import QtQuick 2.0Image {
id: background
source: "../background.jpg"
width: 360
height: 360
focus: trueRectangle { id: rectangle x: 30 y: 30 width: 300 height: 300 color: "#ffffff" radius: 20 border.width: 5 border.color: "#000000" Image { id: image width: 300 height: 300 source: "../example.jpg" } }
}@
My problem is, that the image is still an rectangle without rounded corners.
Does anyone know how to fix that? -
Enable clipping on the rectangle.
-
Hi Andre,
thanks for your reply.
However enabling clipping sadly did not solve the problem.This is the updated code:
@import QtQuick 2.0Image {
id: background
source: "../background.jpg"
width: 360
height: 360
focus: trueRectangle { id: rectangle x: 30 y: 30 width: 300 height: 300 color: "#ffffff" radius: 20 border.width: 5 border.color: "#000000" clip: true Image { id: image width: 300 height: 300 source: "../example.jpg" } }
}
@Do you have an idea how to fix this issue?