QML: add border to free form image - 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...

Answer 1

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"
}
}