QML: add border to free form image

Question

I have a free form image with transparency (let's say, a small image of a blue car). The image has transparency, so that I can place the car on the map of a game. Now, some areas of the game map are bluish, and the car kinda blends in. Is it possible to add a white border automatically in QML? I can't use GIMP or other things to work directly on the image (and I have lots of such images to manipulate) so it would be awesome if there was a QML builtin functionality for this...

David K. Hess David K. Hess · Accepted Answer · 2020-05-11T13:28:15

In situations like this, a drop shadow is a good way of making an item standout. You normally would make it black or white based on the opposite of the average gray level of the image content itself.

It's pretty easy to add a DropShadow to an Image. This example places a nice light black drop shadow onto an image.

import QtGraphicalEffects 1.0

Image {
    source: "my_image.png"

    layer.enabled: true
    layer.effect: DropShadow {
        verticalOffset: 3
        horizontalOffset: 0
        radius: 8
        color: "#26000000"
    }
}

For more info see: https://doc.qt.io/qt-5/qml-qtgraphicaleffects-dropshadow.html

If you want a centered box shadow instead, just use a Rectangle somewhat like this:

Rectangle {

    layer.enabled: true
    layer.effect: DropShadow {
        radius: 8
        color: "#26000000"
    }

    Image {
        source: "my_image.png"
    }
}

Or if you just want a white border only:

Rectangle {
    color: "transparent"
    border.color: "white"
    border.width: 2

    Image {
        source: "my_image.png"
    }
}

QML: add border to free form image

1 Answers