Image rounded corners in QML

Question

To my surprise, the Image component has no radius property. I tried emulating the rounded corners by putting the image in a rounded Rectangle

Answer 1

When your background is a solid color or when you're never moving the image, a fast way to make rounded corners is to overlap your Image with another one (or with a BorderImage) that only draws the corners.

When this is not an option, but you are using OpenGL, then another way is to apply a mask to the image through a pixel shader. See http://blog.qt.digia.com/blog/2011/05/03/qml-shadereffectitem-on-qgraphicsview/ for a plugin that works on top of Qt 4.

Finally, it's also possible to write a QDeclarativeImageProvider that preprocesses your image to make the corners rounded.