Question

我有一个固定大小的黄色QML矩形，我正在缩放其中的图像。

当发生这种情况时，我的图像大小比我的黄色矩形（显而易见）大，但是我想让这个图像站在矩形内而不是它上面 ...这是我的代码：

import QtQuick 2.1
import QtQuick.Controls 1.0

Rectangle{
    width: 1500
    height: 1100
    color: "red"

    Rectangle {
        width: 900
        height: 500
        color: "yellow"

        Component.onCompleted: init()

        Image {
            id: imagenCentro
            width: 800
            height: 400
            fillMode: Image.PreserveAspectCrop
            source: "http://www.bizh2o.com/wp-content/uploads/2015/02/shopping.jpg"
            smooth: true
            z: parent.z+1
            opacity: 0.7
        }

        NumberAnimation {
            id: animacion
            target: imagenCentro
            property: "scale"
            to: 1.5
            easing.type: Easing.InOutQuad
        }

        function init(){
            imagenCentro.scale = 1
            animacion.duration = 5000
            animacion.start()
        }

    }

}

感谢。

Answer 1

在黄色矩形上将clip设置为true：

import QtQuick 2.1
import QtQuick.Controls 1.0

Rectangle {
    width: 1500
    height: 1100
    color: "red"

    Rectangle {
        width: 900
        height: 500
        color: "yellow"
        clip: true

        Component.onCompleted: init()

        Image {
            id: imagenCentro
            width: 800
            height: 400
            fillMode: Image.PreserveAspectCrop
            source: "http://www.bizh2o.com/wp-content/uploads/2015/02/shopping.jpg"
            smooth: true
            z: parent.z + 1
            opacity: 0.7
        }

        NumberAnimation {
            id: animacion
            target: imagenCentro
            property: "scale"
            to: 1.5
            easing.type: Easing.InOutQuad
        }

        function init() {
            imagenCentro.scale = 1
            animacion.duration = 5000
            animacion.start()
        }
    }
}

请注意clip does come with performance penalties：

默认情况下禁用剪辑，并且只应在需要时启用剪辑。

剪辑是一种视觉效果，而不是优化。它增加（而不是降低）渲染器的复杂性。如果启用了剪裁，则项目会将其自己的绘画以及其子画面绘制到其边界矩形。这会阻止渲染器自由地重新排序元素的绘制顺序，从而导致次优的最佳情况场景图遍历。

委托内部的剪辑特别糟糕，应该不惜一切代价避免。

QML比例图像使矩形变形

1 个答案: