QML/QtQuick2 Anchor項目在縮放圖像上的靜態位置

Question

我正試圖做的是將項目錨定在圖像上的特定位置。 Image需要使用Image.PreserveAspectFit作爲fillMode。我遇到的問題是圖像的height/width/paintedWidth/paintedHeight是整個圖像「畫布」（我不確定它實際稱爲什麼），而不是圖像本身的繪製部分。所以我不能錨定到實際的圖像。

請參閱下面的代碼，我嘗試使用錨點（紅色矩形）以及子矩形和x，y座標（綠色矩形）。

import QtQuick 2.3 
import QtQuick.Window 2.2 

Window { 
    visible: true 

height: 400 
width: 400 

Image { 
    id: image 
    anchors.fill: parent 
    fillMode: Image.PreserveAspectFit 
    source: "image.jpg" 

    Rectangle { 
     id: bottomRight 
     width: 40 
     height: 40 
     color: "green" 
     x: parent.width * 0.75 
     y: parent.height * 0.75 
    } 
} 

Rectangle { 
    id: topLeft 
    width: 40 
    height: 40 
    color: "red" 

    anchors.top: image.top 
    anchors.left: image.left 
    anchors.topMargin: image.height * 0.25 
    anchors.leftMargin: image.width * 0.25 
    } 
} 

當您更改窗口的大小時，矩形的位置不在圖像上的相同位置。我會張貼一些截圖，但我沒有足夠的聲望呢！

我使用調試器瀏覽了小部件樹，但似乎無法找到任何提供關於可用於計算矩形放置的縮放比例信息的屬性。

更新 我用下面的功能，因爲我將使用大量的潛在覆蓋這些來計算利潤率。

function horMargin(val) 
{ 
    return ((image.width - image.paintedWidth)/2 + image.paintedWidth * val) 
} 

function verMargin(val) 
{ 
    return ((image.height - image.paintedHeight)/2 + image.paintedHeight * val) 
} 

Answer 1

你嘗試使用paintedWidth和paintedHeight？ :)

這會給你，填補了畫圖像的矩形：

import QtQuick 2.3 
import QtQuick.Window 2.2 

Window { 
    visible: true 

    height: 400 
    width: 400 

    Image { 
     id: image 
     anchors.fill: parent 
     fillMode: Image.PreserveAspectFit 
     source: "image.jpg" 
    } 

    Rectangle { 
     x: (image.width - image.paintedWidth)/2 
     y: (image.height - image.paintedHeight)/2 
     width: image.paintedWidth 
     height: image.paintedHeight 
     color: "transparent" 
     border.color: "darkorange" 
     border.width: 2 
    } 
} 

從那裏，你可以計算出如何應用你所需要的空間。