イメージブレイクアライメントにマスクを適用する

Question

イメージにマスクを適用して円形にするときはいつでも、UIエレメントのアラインメントが壊れます。イメージは、いくつかのピクセル数だけ右にオフセットされます。

// main.qml 
import QtQuick 2.8 
import QtQuick.Controls 2.1 
import QtQuick.Layouts 1.1 

ApplicationWindow { 
    visible: true 
    width: 640 
    height: 480 
    title: qsTr("Example") 

    Page1Form { 

    } 
} 

// Page1Form.qml 
import QtQuick 2.8 
import QtQuick.Layouts 1.1 
import QtQuick.Controls 2.1 

Item { 
    RowLayout { 
     id: playerRowLayout 

     Layout.alignment: Qt.AlignLeft 

     Layout.fillWidth: true 

     RoundedImage { 
      id: displayImage 

      width: 50 
      height: 50 

      Layout.preferredWidth: 50 
      Layout.preferredHeight: 50 

      source: "Images/DisplayPicture.jpeg" 

      sourceSize.width: width 
      sourceSize.height: height 
     } 

     Text { 
      id: playerText 
      text: qsTr("Hameer Abbasi (Pro)") 
      font.family: "Source Sans Pro" 
      font.pixelSize: 12 
     } 
    } 
} 

// RoundedImage.qml 
import QtQuick 2.8 
import QtGraphicalEffects 1.0 

Image { 
    id: img 
    property bool rounded: true 
    property bool adapt: true 

    layer.enabled: rounded 
    layer.effect: OpacityMask { 
     maskSource: Rectangle { 
      anchors.centerIn: parent 
      width: adapt ? img.width : Math.min(img.width, img.height) 
      height: adapt ? img.height : Math.min(img.width, img.height) 
      radius: Math.min(width, height)*0.5 
     } 
    } 
} 

私はそうのように、位置ずれが消え、ImageにRoundedImageを変更します。私はOpacityMaskにanchors.fill: imgまたはanchors.centerIn: imgを追加するときに、私が得る、また

次の結果（あなたが見ることができるように、ミスアライメントは消えずに動きました）：

がが動作するようには思えないことを唯一のものは、テキストボックスにanchors.right: displayImage.leftを設定し、何とかハックのように思えるし、私は右何とか何かをやっていないよように私は感じることです。誰かが問題がどこにあるのか、これを修正するための「適切な」方法は何かを理解するのに役立つことができますか？

Answer 1

私はあなたに説明できませんなぜこのことが起こっているのですか？私にはバグのように見えます。

簡単に回避策があります。のすぐ内側にImageを入れないでください。 RoundedImage.qmlを次のように変更してください。

// RoundedImage.qml 
import QtQuick 2.7 
import QtGraphicalEffects 1.0 

Item { 
    id: img 
    property bool rounded: true 
    property bool adapt: true 
    property alias source: image.source 
    property alias sourceSize: image.sourceSize 
    Image { 
     id: image 

     width: img.width 
     height: img.height 
     layer.enabled: rounded 
     layer.effect: OpacityMask { 
      maskSource: Rectangle { 
       width: adapt ? img.width : Math.min(img.width, img.height) 
       height: adapt ? img.height : Math.min(img.width, img.height) 
       radius: Math.min(width, height)*0.5 
      } 
     } 
    } 
} 

奇妙な動作はなくなりました。