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)
   }
}

}