Question

在我的测试应用程序中，我正在绘制三角形。在这个三角形的左下角（最小称其为nr 2），我需要添加该行下方的文本。如果三角形旋转，则文本也应旋转。这是一个“解释”图像：

And here is the code:

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"

        Item
        {
            anchors.fill: parent
            rotation: 0

            property real trheight: 0;
            property real hfBase: 0;

            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
                    parent.trheight = (Math.sqrt(Math.pow(trbase, 2) -
                            Math.pow(trbase / 2, 2))) * hFactor;

                    parent.hfBase = trbase * hFactor;
                    ctx.lineTo(parent.hfBase / -2, parent.trheight); // left arm
                    ctx.lineTo(parent.hfBase / 2, parent.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
            }
        }

        Text
        {
            //x: ?
            //y: ?

            font.family: "RobotoCondensed-Regular";
            font.pointSize: 12;
            text: qsTr("TEST");
            opacity: 0.6;
        }
    }
}

因此理想情况下，最终效果应如下所示（用颜料编辑）：

然后像这样旋转30度：

在此方面，我将不胜感激。

Answer 1

最简单的方法是将Text作为要旋转的项目的子项目。然后，您可以将其放置在其底部，并随其父级一起旋转。

但是，您的画布覆盖了整个窗口，因此（根据当前代码）唯一的选择是在绘制形状时绘制文本。您可以使用text()，fillText()或strokeText()绘制文本。

我建议重写您的代码，以使用我提到的第一种方法。给每个形状自己的画布，并使文本成为Canvas项目的子项（如果不想将阴影效果应用于文本，则使其为父项）。旋转项目比重绘Canvas旋转要便宜得多。

将文字对齐到一个点

1 个答案: