在圓中排列多個對象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個半圓。