Dessiner un arc/cercle secteur en QML?

Je sais qu'il est possible de tracer un cercle en QML en utilisant le code suivant:

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
}

Ma question est: que faire si j'ai besoin de tirer un secteur de cercle. (Tranches de Pizza) et faire de chacune de ces tranches cliquable? Puis-je faire cela à l'aide de QML?

OriginalL'auteur RafaelTSCS | 2014-09-25

  1. 9

    Oui, à l'aide de la Toile (et 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();
        }
    }
}

    J'ai pris le code de cette réponse, allongement de l'intervalle Qt Toile de implémente l'API HTML5 Canvas. Cela le rend vraiment facile de trouver des exemples sur le web; il suffit de chercher pour "dessiner à tarte bla html5 canvas", par exemple.

    Pour la détection de la souris, vous devez brosser vos compétences mathématiques...

    ... ou tout simplement voler le code de ici. 🙂

    Noter que la Toile seulement repeint lorsqu'elle est redimensionnée, ou lorsque requestPaint() est appelé, donc si vous voulez changer la couleur d'une tranche en fonction de la position de la souris, vous devez appeler cette fonction pour voir le changement de couleur.

    OriginalL'auteur Mitch

  2. 2

    Utiliser des graphiques 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 }
}
}

    OriginalL'auteur Dany19