BorderImage doesn't work as it's supposed to

qcoderpro

In the following code I've used both Image and BorderImage, but

horizontalTileMode: BorderImage.Stretch
verticalTileMode: BorderImage.Stretch

have no effect apparently!

import QtQuick 2.15
import QtQuick.Window 2.15

Window {
    width: 800
    height: 700
    visible: true

    Image {
        id: image
        anchors.centerIn: parent
        source: "qrc:/test.png"
    }
    BorderImage {
        x: image.x
        y: image.y + image.height + 10
        border { left: 30; top: 30; right: 30; bottom: 30 }
        source: "qrc:/test.png"
        horizontalTileMode: BorderImage.Stretch
        verticalTileMode: BorderImage.Stretch
    }
}

What's the problem, please?

qcoderpro

Isn't there any reply for my issue about the project!? :(

jeremy_k

The code above doesn't specify a height, width, or anchors for the BorderImage. As a result, it uses the implicit size of test.png. There's no need for it to scale.

qcoderpro

@jeremy_k
Thank you.

I use the code below and it worked:

import QtQuick 2.15
import QtQuick.Window 2.15

Window {
    width: 800
    height: 700
    visible: true

    Image {
        id: image
        width: 200; height: 200
        anchors.centerIn: parent
        source: "qrc:/test.png"
    }
    BorderImage {
        id: brdrImage
        x: image.x
        y: image.y + image.height + 10
        width: 200; height: 200
        border { left: 30; top: 30; right: 30; bottom: 30 }
        source: "qrc:/test.png"
        horizontalTileMode: BorderImage.Stretch
        verticalTileMode: BorderImage.Stretch
    }
}

But one more question, this time on the corners of the image. They shouldn't change based of the definition of BorderImage but in the output image (the one in the bottom) they have changed. why, please?