Hi @fallouthase, Please find bellow a simple example using PathAngleArc: https://doc.qt.io/qt-6/qml-qtquick-pathanglearc.html import QtQuick.Shapes Shape { width: 200 height: 200 anchors.top: parent.top anchors.left: parent.left // Enable multisampled rendering layer.enabled: true layer.samples: 4 // Outer gray arc: ShapePath { fillColor: "transparent" strokeColor: "gray" strokeWidth: 20 capStyle: ShapePath.RoundCap PathAngleArc { centerX: 100; centerY: 100 radiusX: 100-20/2; radiusY: 100-20/2 startAngle: 135 sweepAngle: 270 } } // Inner blue arc: ShapePath { fillColor: "transparent" strokeColor: "blue" strokeWidth: 20 capStyle: ShapePath.RoundCap PathAngleArc { centerX: 100; centerY: 100 radiusX: 100-20/2; radiusY: 100-20/2 startAngle: 135 sweepAngle: 180 } } } [image: 512e5cf8-7b1e-4b4c-aa93-d98a1b78f9c0.png] You can also use already implemented customizable QML Circular Slider: https://github.com/arunpkqt/CircularSlider Best Regards

Hi I just keep a pointer to the "white lines" and adjust if i move yellow. class ColorItem : public QGraphicsItem { .. ConnectorLine* line = nullptr; .. protected: QVariant itemChange(GraphicsItemChange change, const QVariant& value) override { if (change == ItemPositionChange && scene()) { if (line) { line->adjust(); } } return QGraphicsItem::itemChange(change, value); } private: QColor color; }; line->Adjust() alters its endpoints. You could just adjust it directly here.

@Asperamanca No, I didn't set these two flags ItemClipsToShape, ItemClipsChildrenToShape. Then I tried setting only one flag ItemClipsToShape, and both of ItemClipsToShape, ItemClipsChildrenToShape. For each, it still check if the point is in the boundingrect() firstly, and then check the shape() which means if point is not in boundingrect(), it wouldn't bother to check shape(). So now my solution is still enlarging the boundingrect() area.

@mrjj Well, thanks to you and @kshegunov too. You guys are amazing!