Zeichnen Sie einen Bogen, Kreis, - Sektor, die in QML?

Ich weiß, dass es möglich ist, einen Kreis zu zeichnen, die in QML mit dem folgenden code:

Rectangle {
     width: 150
     height: 150
     anchors.horizontalCenter: parent.horizontalCenter
     anchors.top: parent.top
     color: "#095e7b"
     border.color: "#0a2f4a"
     border.width: 2
     radius: width*0.5
}

Meine Frage ist: was ist, wenn ich brauche, um zu zeichnen ein Sektor eines Kreises. (Pizza-Slices) und machen jede dieser Scheiben anklickbar? Kann ich dies mit QML nur?

InformationsquelleAutor RafaelTSCS | 2014-09-25

  1. 9

    Ja, mit Canvas (und Context2D):

    import QtQuick 2.3

Rectangle {
    width: 400
    height: 400

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

            var centreX = width / 2;
            var centreY = height / 2;

            ctx.beginPath();
            ctx.fillStyle = "black";
            ctx.moveTo(centreX, centreY);
            ctx.arc(centreX, centreY, width / 4, 0, Math.PI * 0.5, false);
            ctx.lineTo(centreX, centreY);
            ctx.fill();

            ctx.beginPath();
            ctx.fillStyle = "red";
            ctx.moveTo(centreX, centreY);
            ctx.arc(centreX, centreY, width / 4, Math.PI * 0.5, Math.PI * 2, false);
            ctx.lineTo(centreX, centreY);
            ctx.fill();
        }
    }
}

    Ich habe eigentlich den code für das von diese Antwort, wie Qt-Canvas implementiert das HTML5-Canvas-API. Dies macht es wirklich leicht, Beispiele zu finden auf die web; suchen Sie einfach nach "zeichnen Kreissegment bla html5 canvas", zum Beispiel.

    Für die Maus-Erkennung, müssen Sie eine Bürste aus Ihrer Mathe-Kenntnisse...

    ... oder stehlen Sie den code aus hier. 🙂

    Beachten Sie, dass die Leinwand nur neu, wenn es geändert wird, oder wenn requestPaint() genannt wird, also, wenn Sie wollen, ändern Sie die Farbe der Scheibe, je nach der position der Maus, müssen Sie zum Aufruf dieser Funktion zu sehen, die Farbe ändern.

    InformationsquelleAutor Mitch

  2. 2

    Mithilfe von Diagrammen http://doc.qt.io/QtCharts/qtcharts-qmlmodule.html

    import QtQuick 2.0
import QtCharts 2.0

ChartView {
width: 400 
height: 300
theme: ChartView.ChartThemeBrownSand
antialiasing: true

PieSeries {
    id: pieSeries
    PieSlice { label: "eaten"; value: 94.9 }
    PieSlice { label: "not yet eaten"; value: 5.1 }
}
}

    InformationsquelleAutor Dany19

Schreibe einen Kommentar