在圆圈QML

Question

我需要安排多个qtquick对象（圆形），使它们自己形成一个圆圈。我无法找到一种创建对象的方法，以便在创建后可以访问它们的属性。目前我正在JS for循环中创建三个不同的对象：圆圈，旋转和翻译。然后我将旋转和平移设置为每个圆的变换分量，然后它们的临时变量（在for循环内）超出范围。但我希望能够随时更改每个圆圈的变换组件。有没有办法做到这一点？

这是我的JS代码：

function drawCircles() {
var translationcomponent = Qt.createComponent("translations.qml");
var circlecomponent = Qt.createComponent("circles.qml");
var rotationcomponent = Qt.createComponent("rotations.qml");
for(var i = 0; i<5; i++) {
    var circle = circlecomponent.createObject(appbase);
    var translation = translationcomponent.createObject(appbase);
    var rotation = rotationcomponent.createObject(appbase);

    rotation.angle = 72*i;
    rotation.origin.x = 25;
    rotation.origin.y = 25;
    translation.y = -150
    circle.transform = [translation,rotation];

}

我的主要qml文件：

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
import "drawcircles.js" as Dcop

Rectangle {
property int originx: qmlwidth/2
property int originy: qmlheight/2
id: appbase
height: qmlheight
width: qmlwidth
color: "green"

Component.onCompleted: Dcop.drawCircles();

// below here unimportant
Rectangle {
    height: 50
    width: height
    color: "red"
    radius: width/2
    anchors.horizontalCenter: parent.horizontalCenter
    anchors.verticalCenter: parent.verticalCenter

}

Text {
    id: qmlw
    text: appbase.width
}

Text {
    anchors.left: qmlw.right
    text: appbase.height

}

}

这是应用程序的样子：

Answer 1

第一个想法是使用PathView来排列项目，以及Path个段之一，例如PathSvg：

PathView {
    width: 400
    height: 400
    anchors.centerIn: parent
    model: ListModel {
        ListElement { name: "element1" }
        ListElement { name: "element2" }
        ListElement { name: "element3" }
        ListElement { name: "element4" }
        ListElement { name: "element5" }
        ListElement { name: "element6" }
        ListElement { name: "element7" }
        ListElement { name: "element8" }
    }
    delegate: Rectangle {
        width: 40
        height: 40
        radius: 20
        color: "blue"
        Text {
            text: name
            anchors.centerIn: parent
            transform: [
                Translate {y: -30}
            ]
        }
    }
    path: Path {
        id: myPath
        startX: 0; startY: 0
        PathSvg { path: "M 200 200 m -200 0 a 200 200 0 1 0 400 0 a 200 200 0 1 0 -400 0" }
    }
}

path在这里是硬编码的，但您可以根据下一个采用它：

M cx cy m -r, 0 a r,r 0 1,0 (r * 2),0 a r,r 0 1,0 -(r * 2),0

其中r是圆的半径，（cx，cy） - 是中心。

同样的方式，但更清楚：

path: Path {
        startX: 200
        startY: 0
        PathArc { x: 200; y: 400; radiusX: 200; radiusY: 200; useLargeArc: true }
        PathArc { x: 200; y: 0; radiusX: 200; radiusY: 200; useLargeArc: true }
    }

问题在于你无法绘制填充圆，因为在这种情况下，起始点=终点结束将不会绘制任何内容。解决方法是使用2个半圆。