Qml OpacityMask 降低图像质量

Question

我有一个包含图像的矩形。我正在尝试创建一个带有黑色边框的圆形图像。我试过使用 OpacityMask，但当我这样做时，它会降低图像质量。在边框和图像之间的某些地方也有非常少量的白色 space。我已经提供了下面的代码。注释掉的行是我尝试过但无济于事的事情。我也尝试过使用单独的同级 OpacityMask 将 Rectangle 和 Image 同级包含在一个 Item 中，但得到了相同的结果。

有没有人知道更好的方法。还有谁知道创建边框的更好方法 - 目前我正在使用

停止覆盖边框的图像

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

仍然不确定为什么上面的代码不起作用。也不确定为什么我最初在 "making the Rectangle and Image siblings contained within an Item with a separate sibling OpacityMask" 上的尝试（基于 Stack Overflow 中的另一个答案）没有奏效。但是经过进一步调查，我发现了另一个答案，它与确实有效的 "making the Rectangle and Image siblings contained within an Item with a separate sibling OpacityMask" 略有不同。更新后的代码如下：

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

}

Qml OpacityMask 降低图像质量

Qml OpacityMask reduces image quality

image

qml

opacitymask