¿Dibujar un sector de arco / círculo en QML?

Solución:

Sí, usando Canvas (y 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();
        }
    }
}

De hecho, tomé el código para esto de esta respuesta, ya que Canvas de Qt implementa la API de HTML5 Canvas. Esto hace que sea realmente fácil encontrar ejemplos en la web; simplemente busque “dibujar una rebanada de tarta blah html5 canvas”, por ejemplo.

Para la detección del mouse, tendrás que ignorar tus habilidades matemáticas …

… o simplemente roba el código de aquí. 🙂

Tenga en cuenta que Canvas solo vuelve a pintar cuando se cambia de tamaño, o cuando se llama a requestPaint (), por lo que si desea cambiar el color de un corte según la posición del mouse, deberá llamar a esa función para ver el cambio de color.

Dibuja usando qml, no necesitas el lienzo. Como guía, suelo revisar los ejemplos de Qt antes de decidir una implementación. El siguiente código se puede encontrar en el ejemplo “Formas”.

import QtQuick.Shapes 1.15

Shape {
    width: 120
    height: 130
    anchors.bottom: parent.bottom
    anchors.right: parent.right
    // multisample, decide based on your scene settings
    layer.enabled: true
    layer.samples: 4

    ShapePath {
        fillColor: "black"
        strokeColor: "darkBlue"
        strokeWidth: 20
        capStyle: ShapePath.FlatCap

        PathAngleArc {
            centerX: 65; centerY: 95
            radiusX: 45; radiusY: 45
            startAngle: -180
            sweepAngle: 180
        }
    }
}

Utilice gráficos 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 }
}
}

---

---

Utiliza Nuestro Buscador