QML에서 호/원 섹터를 그립니다.

Question

는 나는 다음과 같은 코드를 사용하여 QML에서 원을 그리는 것이 가능하다는 것을 알고

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 
} 

내 질문은 : 나는 원의 섹터를 그릴 필요합니다. (Pizza Slices)를 클릭하고 각 슬라이스를 클릭 할 수있게 만드시겠습니까? QML 만 사용하여이 작업을 수행 할 수 있습니까?

Answer 1

캔버스를 사용하여

예, (그리고 Context2D는) : Qt의 캔버스는 HTML5 캔버스 API를 구현으로

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(); 
     } 
    } 
} 

사실, this 대답에서이에 대한 코드를했다. 이렇게하면 웹에서 예제를 찾는 것이 정말 쉽습니다. 예를 들어, "파이 조각을 그리기 blah html5 canvas"를 검색하면됩니다.

마우스 감지를 들어, 당신이 당신의 수학 실력을 브러시해야합니다

...

... 아니면 그냥은 here의 코드를 훔치는. :)

캔버스는 크기가 조정될 때 또는 requestPaint()이 호출 될 때만 다시 표시되므로 마우스 위치에 따라 슬라이스의 색상을 변경하려면 해당 함수를 호출하여 색상을 확인해야합니다 변화.

Answer 2

사용 차트 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 } 
} 
}