Question

如何使用内部阴影在QML中实现Rectangle？

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

更新：

这是我尝试做的简化版本（没有显示任何影子）：

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

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

inner shadow screenshot

当我在寻找相关的错误时，我从QTBUG-27213得到了这个想法。

Answer 2

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

（c）Gunnar Sletta：

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

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

另一方面，InnerShadow也使用＆＃34; old＆＃34;高斯代码需要更多的样本来获得正确的

无论如何，在矩形上获得内部阴影的方法是用透明像素的单个像素边框填充它。这也是为什么有时会将预期源项目的父项作为效果源的原因。（请注意，这通常不起作用，并且实际上不支持父级作为源，因为执行此操作时许多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，不能透明＆＃39;因为这被解释为没有边框）

QML矩形上的内部阴影

2 个答案: