0

我有一个包含图像的矩形。我正在尝试创建带有黑色边框的圆形图像。我试过使用 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)
           }
        }
     }
  }
4

1 回答 1

0

仍然不确定为什么上面的代码不起作用。也不确定为什么我最初尝试“使包含在具有单独兄弟 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)
   }
}

}

于 2020-05-21T10:59:45.630 回答