Question

我正在尝试制作组件，该组件允许我移动Flickable并对其进行缩放，与QML组件Map类似，除了用户边框（Flickable具有边框默认情况下。）

目前，我有这个

Flickable {
    id: flickArea
    width: parent.width
    height: parent.height
    contentWidth: inner.width *  slider.value
    contentHeight: inner.height * slider.value
    Image {
        transform: Scale {
            origin.x: parent.width /2
            origin.y: parent.height/2
            xScale:  slider.value
            yScale: slider.value
        }

        id: inner
        width: parent.contentWidth
        anchors.centerIn: parent
        source: "file:/home/rce/Obrázky/test"
    }
}

但是它没有按预期工作（周围有白色边框，缩放未居中）。

我在做什么错？我应该使用Flickable，还是还有其他合适的组件？

Answer 1

您的源代码不完整，因此无法确切了解问题所在。

所以，我假设：

提到的白色边框是将表面拖动到Flickable的边界之外时显示的白色表面。
滑块 id表示滑块项目。

以下代码可以提供帮助：

import QtQuick 2.9
import QtQuick.Controls 1.4

Item {
    width: 1280
    height: 720

    Flickable {
        id: flickArea
        anchors.fill: parent
        focus: true
        contentWidth: Math.max(inner.width * slider.value, width)
        contentHeight: Math.max(inner.height  * slider.value, height)
        anchors.centerIn: parent
        boundsBehavior: Flickable.StopAtBounds
        contentX: contentWidth === width ? 0 : inner.width * slider.value / 2 - flickArea.width / 2
        contentY: contentHeight === height ? 0 : inner.height * slider.value / 2 - flickArea.height / 2

        Image {
            id: inner
            scale: slider.value
            transformOrigin: Item.Center
            anchors.centerIn: parent
            source: "Ba_b_do8mag_c6_big.png"
        }
    }

    Slider {
        id: slider
        value: 2
        orientation: Qt.Vertical
        anchors {
            bottom: parent.bottom
            right: parent.right
            margins: 50
        }
    }
}

在这里，由于boundsBehavior: Flickable.StopAtBounds，白色边框不再显示。

在我的示例中，使用滑块时，缩放始终居中。一旦渲染的图像大于窗口的大小，用户就可以轻拂表面。

但是，即使用户在该区域中移动，缩放也将始终居中。机芯未保存。

使用的图像可在此处下载：https://commons.wikimedia.org/wiki/File:Ba_b_do8mag_c6_big.png_

在QML

1 个答案: