QML 矩形上的内阴影答案

【问题标题】：Inner shadow on QML RectangleQML 矩形上的内阴影
【发布时间】：2014-12-15 13:04:49
【问题描述】：

如何在 QML 中实现带有内阴影的矩形？

请参阅以下链接中的示例：

更新：

这是我正在尝试做的简化版本（不显示任何阴影）：

import QtQuick 2.0
import QtGraphicalEffects 1.0

Item {
   width: 400
   height: 400

   Item {
      anchors.fill: parent

      Rectangle {
         id: myRectangle
         anchors.centerIn: parent
         width: 200
         height: 200
         color: "grey"
      }
   }

   InnerShadow {
      anchors.fill: myRectangle
      cached: true
      visible: true
      horizontalOffset: 0
      verticalOffset: 0
      radius: 25
      samples: 16
      color: "#b0000000"
      smooth: true
      source: myRectangle
   }
}

对不起。我的愚蠢......当我简化代码时我弄错了（该项目用于 DropShadow 测试，它有效）。这就是它应该的样子：

import QtQuick 2.0
import QtGraphicalEffects 1.0

Item {
   width: 400
   height: 400

   Rectangle {
      id: myRectangle
      anchors.centerIn: parent
      width: 200
      height: 200
      color: "grey"
   }

   InnerShadow {
      anchors.fill: myRectangle
      cached: true
      visible: true
      horizontalOffset: 0
      verticalOffset: 0
      radius: 25
      samples: 16
      color: "#b0000000"
      smooth: true
      source: myRectangle
   }
}

【问题讨论】：

锚点不适用于非父母或兄弟姐妹的项目，因此请尝试将 InnerShadow 移动到您的 Item。
@cmannett85 是对的。您没有看到任何警告/错误吗？在这种情况下，内部项目变得毫无意义。
Moving inside myRectangle is not an options as for the documentation of source property --> "注意：不支持让效果包含自身，例如通过将源设置为效果的父级。”

标签： qt qml qt-quick qtquick2

【解决方案1】：

我不知道为什么，但如果你使用项目上方的项目，你正在尝试在其中投射阴影（在这种情况下，它恰好是根项目，但它不一定是):

import QtQuick 2.0
import QtGraphicalEffects 1.0

Item {
    id: root
    width: 300
    height: 300

    Rectangle {
        id: myRectangle
        anchors.centerIn: parent
        width: 100
        height: 100
        color: "grey"
    }

    InnerShadow {
        anchors.fill: root
        cached: true
        horizontalOffset: 0
        verticalOffset: 0
        radius: 16
        samples: 32
        color: "#b0000000"
        smooth: true
        source: root
    }
}

我是在搜索相关 bug 时从QTBUG-27213 得到这个想法的。

【讨论】：

好一个。现在的问题是：这是一个错误还是预期的行为？鉴于源文件（我在问题中引用过），它似乎是第一个，IMO。
看起来肯定不对；我会说值得为它创建一个错误报告。
您是否创建了错误报告？您可以在此处链接以供将来参考吗？谢谢:)
不，我还没有创建，抱歉。
感谢您的回复！当我将myRectangle 用作source/anchors.fill 时，我没有阴影。当我将其更改为 root 时，我得到了与上面提到的错误报告中描述的类似的结果。我是这个论坛的新用户，所以我似乎还没有权限在我的帖子中包含图片。但视觉结果是显示器其他部分（不同颜色）的奇怪混合。

【解决方案2】：

第一条评论中的https://bugreports.qt.io/browse/QTBUG-56467 是这些问题的信息性答案：

InnerShadow 将根据源对象的半透明区域在不透明区域产生阴影。当源完全不透明时（就像在这个矩形的情况下，结果将因此没有阴影。

DropShadow 有一个 transparentBorder 属性，默认设置为 true 以帮助用户获得预期的结果，即使是完全不透明的输入。 InnerShadow 缺少这一点。

顺便说一句，InnerShadow 还使用“旧”高斯代码，这需要更多的样本才能正确

无论如何，在矩形上获得内部阴影的方法是用透明像素的单个像素边框填充它。这也是为什么有时将预期源项的父项作为效果源的原因。（请注意，这通常不起作用，并且实际上不支持父级作为源，因为这样做时许多 GPU 会失败）。

以下代码产生预期的结果：

import QtQuick 2.4
import QtGraphicalEffects 1.0

Item
{
    width: 320
    height: 480

    Item {
        anchors.centerIn: parent
        width: 100
        height: 100

        Rectangle {
            anchors.fill: parent
            anchors.margins: 1
            color: "lightsteelblue"
        }

        layer.enabled: true
        layer.effect: InnerShadow {
            color: "black"
            samples: 32
            radius: 10
            spread: 0.4
        }
    }
}

或者，如果你想保存额外的项目，并且可以忍受一点点诡计：

Rectangle {
    anchors.centerIn: parent
    width: 100
    height: 100
    color: "lightsteelblue"
    border.color: Qt.rgba(0, 0, 0, 0.01)
    border.width: 1
    layer.enabled: true
    layer.effect: InnerShadow {
        color: "black"
        samples: 20
        radius: 8.5
        spread: 0.2
    }
}

（border.color，不能是“透明”，因为这被解释为没有边框）

【讨论】：