Qml OpacityMask 降低圖像質量

Question

我有一個包含圖像的矩形。 我正在嘗試創建帶有黑色邊框的圓形圖像。 我試過使用 OpacityMask，但是當我這樣做時，它會降低圖像質量。 在邊框和圖像之間的某些地方也有非常少量的空白。 我提供了下面的代碼。 注釋掉的行是我嘗試過但無濟於事的事情。 我還嘗試使用單獨的兄弟 OpacityMask 使包含在 Item 中的 Rectangle 和 Image 兄弟姐妹得到相同的結果。

有誰知道這樣做的更好方法。 還有誰知道創建邊界的更好方法 - 目前我正在通過使用停止覆蓋邊界的圖像

anchors.margins: imageRect.border.width

Rectangle {
     id: imageRect
     property int spacer: 10 
     property int spacedWidth: imageDel.width - spacer
     anchors.horizontalCenter: parent.horizontalCenter
     width: spacedWidth
     height: spacedWidth / imageListModel.getImageWToHRatio()  
     border.color: "black"
     border.width: 2
     radius: imageRadius
     //clip: true

     Image {
        id: image
        source: "image://lmImageProvider/" + rowIndex + "_" + index
        //sourceSize: Qt.size(parent.width, parent.height)
        anchors.fill: parent
        anchors.margins: imageRect.border.width
        cache: false
        //visible: false
        //fillMode: Image.PreserveAspectCrop
        layer.enabled: true
        layer.smooth: true
        //layer.textureSize: "600x900"
        layer.effect: OpacityMask {
           maskSource: imageRect
           // cached: true
        }
        //mipmap: true


        property bool reload: reloadImageRole
        onReloadChanged: {
           source = ""
           source = "image://lmImageProvider/" + rowIndex + "_" + index
        }

        MouseArea {
           anchors.fill: parent
           onClicked: {
              imageListModel.toggleSelected(rowIndex + "_" + index)
           }
        }
     }
  }

Answer 1

仍然不確定為什么上面的代碼不起作用。 也不確定為什么我最初嘗試“使包含在具有單獨兄弟 OpacityMask 的項目中的 Rectangle 和 Image 兄弟”（這是基於 Stack Overflow 中的另一個答案）沒有奏效。 但是經過進一步調查，我發現了另一個答案，它與“使包含在具有單獨兄弟 OpacityMask 的項目中的 Rectangle 和 Image 兄弟姐妹”略有不同，這確實有效。 更新的代碼如下：

Rectangle {
   id: imageRect
   property int spacer: 10 
   property int spacedWidth: imageDel.width - spacer
   anchors.horizontalCenter: parent.horizontalCenter
   width: spacedWidth
   height: spacedWidth / imageListModel.getImageWToHRatio()  
   border.color: "black"
   border.width: indImageBorderWidth
   radius: indImageRadius

   Image {
      id: image
      source: "image://lmImageProvider/" + rowIndex + "_" + index
      anchors.fill: parent
      anchors.margins: imageRect.border.width - 2
      cache: false
      visible: false

      property bool reload: reloadImageRole
      onReloadChanged: {
         source = ""
         source = "image://lmImageProvider/" + rowIndex + "_" + index
      }
   }

   Rectangle{
      id: maskRect
      anchors.fill: image
      radius: indImageRadius - 3
      visible: false
      z: image.z + 1
   }

   OpacityMask {
      anchors.fill: image
      source: image
      maskSource: maskRect
   }
   MouseArea {
      anchors.fill: parent
      onClicked: {
      //imageListModel.toggleSelected(rowIndex + "_" + index)
      console.log("Image Clicked: " + rowIndex + "_" + index)
   }
}

}