Question

我正在尝试用QML在矩形内绘制一个弧。我在使用Path和PathArc元素的Qt文档中找到了一个示例。我把它改编成以下

Rectangle {
    id: back
    width: 20
    height: width
    Path {
        startX: back.width/2
        startY: back.height*2/3
        PathArc {
            radiusX: back.width/3
            radiusY: back.height/3
            x: back.width/6
            y: back.height/2
        }
    }
}

但是我遇到的问题是没有显示任何内容。我没有找到设置弧的颜色的方法，所以我不确定会发生什么（无论是什么都没有画或者是用背景颜色绘制的）。有人可以帮忙吗？

Answer 1

根据https://doc.qt.io/qt-5/qml-qtquick-path.html的Qt文档提示：

注意：路径是非可视类型；它不会单独显示任何内容。要绘制路径，请使用Shape。

路径并没有真正“吸引”任何东西。

您正在寻找的最有可能是这样的'ShapePath'，它具有strokeColor和strokeWidth

Shape {
   width: 300
   height: 300

   ShapePath {
      strokeWidth: 8
      strokeColor: 'red'
      startX: 0; startY: 100
      PathArc {
         x: 100; y: 200
         radiusX: 100; radiusY: 100
         direction: PathArc.Clockwise
      }
   }
}

Answer 2

正如derM所暗示，当您需要实现更复杂的绘图时，Canvas是提供最佳功能和灵活性的解决方案。

你会发现它类似于HTML画布，允许你使用Javascript绘图。 QML Context2D确实包含arc method。这是一个未经测试的样本

import QtQuick 2.9

Rectangle {
    width: 200
    height: 200
    color: "blue"

    Canvas {
        anchors.fill: parent
        onPaint: {
            var ctx = getContext("2d");

            // White line, 2px width
            ctx.strokeStyle = Qt.rgba(1, 1, 1, 1);
            ctx.lineWidth = 2;
            ctx.beginPath();

            // Draws an arc, anticlockwise inside the rectangle/square
            //      center             radius   start    end        clockwise
            ctx.arc(width/2, height/2, width/2, Math.PI, 3*Math.PI, false);

            // Draw the arc
            ctx.stoke();
        }
    }

您可以查看Context2D API以获取可以使用的方法列表。

QML弧内矩形

2 个答案: