Question

我正在尝试创建一个可旋转的三角形，该三角形将始终在其底部投射阴影。到目前为止，我已经能够创建用于制作和旋转三角形的代码，但是阴影部分存在问题。这是我的最小代码示例：

import QtQuick 2.9
import QtQuick.Window 2.2
import QtGraphicalEffects 1.0

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Rectangle
    {
        id: rectMain
        anchors.centerIn: parent
        width: parent.width
        height: parent.height
        color: "white"

        Canvas
        {
            anchors.fill: parent

            // set properties with default values
            property real hFactor: 1    // height factor
            property real trbase: 200
            property color strokeColor: "black"
            property color fillColor: "yellow"
            property int lineWidth: 1
            property real alpha: 1
            property real rotAngle: 0
            property real parentWidth: parent.width; // try
            property real parentHeight: parent.height;

            onStrokeColorChanged: requestPaint();
            onFillColorChanged: requestPaint();
            onLineWidthChanged: requestPaint();

            onPaint:
            {
                hFactor = Math.abs(hFactor)

                var ctx = getContext("2d") // get context to draw with
                ctx.clearRect(0, 0, width, height); // remove what is painted so far
                ctx.lineWidth = lineWidth
                ctx.strokeStyle = strokeColor
                ctx.fillStyle = fillColor
                ctx.globalAlpha = alpha

                ctx.save();
                ctx.beginPath();
                ctx.translate(parentWidth / 2, parentHeight / 2);
                ctx.rotate((Math.PI / 180) * rotAngle);
                ctx.moveTo(0, 0);

                // drawing part, first calculate height using Pythagoras equation
                var trheight = Math.sqrt(Math.pow(trbase, 2) - Math.pow(trbase / 2, 2));
                trheight = trheight * hFactor;
                var hfBase = trbase * hFactor;
                ctx.lineTo(hfBase / -2, trheight); // left arm
                ctx.lineTo(hfBase / 2, trheight); // right arm

                ctx.closePath(); // base drawn automatically
                ctx.fill();
                ctx.stroke();
                ctx.restore();
            }

            DropShadow
            {
                anchors.fill: parent
                horizontalOffset: 0
                verticalOffset: 3
                radius: 3
                samples: 7
                color: "#80000000"
                source: parent
            }
        }
    }
}

我面临以下问题：

解析器给我一些有关ShaderEffectSource的错误，必须设置recursive属性，但是我不知道是谁的属性。

Starting M:\bitbucket\qtworkspace\build-mwe-Desktop_Qt_5_11_0_MinGW_32bit-Debug\debug\mwe.exe...
QML debugging is enabled. Only use this in a safe environment.
ShaderEffectSource: 'recursive' must be set to true when rendering recursively.
ShaderEffectSource: 'recursive' must be set to true when rendering recursively.
ShaderEffectSource: 'recursive' must be set to true when rendering recursively.
ShaderEffectSource: 'recursive' must be set to true when rendering recursively.
QObject::disconnect: No such signal QObject::screenChanged(QScreen*) in items\qquickscreen.cpp:476
M:/bitbucket/qtworkspace/build-mwe-Desktop_Qt_5_11_0_MinGW_32bit-Debug/debug/mwe.exe exited with code 0

我在网络中的某个地方发现了一个错误报告，该错误报告说DropShadow属性source无法接受parent，但是由于Canvas无法分配id，因此我不确定该怎么做。除此之外，阴影在rotAngle的0度正确渲染：

添加一些角度（例如45度）后，它无法正确旋转：

在我看来，阴影没有与多边形一起旋转。可以调整吗？最后一件事是：如何在多边形后面隐藏阴影？目前，它正在干扰它。

我不确定解析器错误是否已连接，这就是为什么我在这里将其添加在一起。对于此案，我将不胜感激。

Answer 1

因为无法为画布分配ID

为什么无法为Canvas分配id？

以下代码不会发出警告。

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Rectangle
    {
        id: rectMain
        anchors.centerIn: parent
        width: parent.width
        height: parent.height
        color: "white"

        Canvas
        {
            id: canvas
            anchors.fill: parent

            // set properties with default values
            property real hFactor: 1    // height factor
            property real trbase: 200
            property color strokeColor: "black"
            property color fillColor: "yellow"
            property int lineWidth: 1
            property real alpha: 1
            property real rotAngle: 0
            property real parentWidth: parent.width; // try
            property real parentHeight: parent.height;

            onStrokeColorChanged: requestPaint();
            onFillColorChanged: requestPaint();
            onLineWidthChanged: requestPaint();

            onPaint:
            {
                hFactor = Math.abs(hFactor)

                var ctx = getContext("2d") // get context to draw with
                ctx.clearRect(0, 0, width, height); // remove what is painted so far
                ctx.lineWidth = lineWidth
                ctx.strokeStyle = strokeColor
                ctx.fillStyle = fillColor
                ctx.globalAlpha = alpha

                ctx.save();
                ctx.beginPath();
                ctx.translate(parentWidth / 2, parentHeight / 2);
                ctx.rotate((Math.PI / 180) * rotAngle);
                ctx.moveTo(0, 0);

                // drawing part, first calculate height using Pythagoras equation
                var trheight = Math.sqrt(Math.pow(trbase, 2) - Math.pow(trbase / 2, 2));
                trheight = trheight * hFactor;
                var hfBase = trbase * hFactor;
                ctx.lineTo(hfBase / -2, trheight); // left arm
                ctx.lineTo(hfBase / 2, trheight); // right arm

                ctx.closePath(); // base drawn automatically
                ctx.fill();
                ctx.stroke();
                ctx.restore();
            }
        }

        DropShadow
        {
            anchors.fill: canvas
            horizontalOffset: 0
            verticalOffset: 3
            radius: 3
            samples: 7
            color: "#80000000"
            source: canvas
        }
    }
}

关于警告：

我认为不应将其视为错误。 DropShadow是Item，因此，如果与它的父级嵌套，它将像在阴影上渲染阴影一样。

为什么阴影没有旋转？

因为您要旋转Canvas的内容。即使旋转多边形，这些属性也不会改变。始终垂直放置阴影。

horizontalOffset: 0
verticalOffset: 3

同时旋转：

Item {
    anchors.fill: parent
    rotation: 30
    Canvas
    {
        id: canvas
        anchors.fill: parent

        // set properties with default values
        property real hFactor: 1    // height factor
        property real trbase: 200
        property color strokeColor: "black"
        property color fillColor: "yellow"
        property int lineWidth: 1
        property real alpha: 1
        property real parentWidth: parent.width; // try
        property real parentHeight: parent.height;

        onStrokeColorChanged: requestPaint();
        onFillColorChanged: requestPaint();
        onLineWidthChanged: requestPaint();

        onPaint:
        {
            hFactor = Math.abs(hFactor)

            var ctx = getContext("2d") // get context to draw with
            ctx.clearRect(0, 0, width, height); // remove what is painted so far
            ctx.lineWidth = lineWidth
            ctx.strokeStyle = strokeColor
            ctx.fillStyle = fillColor
            ctx.globalAlpha = alpha

            ctx.save();
            ctx.beginPath();
            ctx.translate(parentWidth / 2, parentHeight / 2);
            ctx.moveTo(0, 0);

            // drawing part, first calculate height using Pythagoras equation
            var trheight = Math.sqrt(Math.pow(trbase, 2) - Math.pow(trbase / 2, 2));
            trheight = trheight * hFactor;
            var hfBase = trbase * hFactor;
            ctx.lineTo(hfBase / -2, trheight); // left arm
            ctx.lineTo(hfBase / 2, trheight); // right arm

            ctx.closePath(); // base drawn automatically
            ctx.fill();
            ctx.stroke();
            ctx.restore();
        }
    }

    DropShadow
    {
        anchors.fill: canvas
        horizontalOffset: 0
        verticalOffset: 3
        radius: 3
        samples: 7
        color: "#80000000"
        source: canvas
    }
}

旋转时阴影适当下降

1 个答案: