在 QML 中缩放图像，同时裁剪为矩形的大小

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确实会带来性能损失：

默认情况下，剪裁处于禁用状态，并且应仅在需要时启用。

剪切是一种视觉效果，而不是优化。它增加了（而不是减少）渲染器的复杂性。如果启用了剪切，则项目将剪切其自己的绘画以及其子级的绘画到其边框。这会阻止渲染器自由地对元素的绘制顺序重新排序，从而导致最佳情况下场景图遍历不理想。

在委托内部进行剪辑尤其糟糕，应不惜一切代价避免。