프로그래밍 방식으로 속도계의 조명 부분을 페인트합니다.

Question

Qt Quick에서 바늘의 위치에 "불이 들어 오게"되는 부분이있는 게이지를 만들려고합니다.

내가 이것을 할 수있는 한 가지 방법은 세그먼트의 이미지를 그려서 코드에서 여러 번 회전하는 것입니다. 그러나 QML에서이 작업을 수행하는 방법을 알지 못합니다.

QML 일 필요는 없으며 Qt Quick 일 필요는 없습니다. 그것은 Qt와 Qt 생성자 내에서 사용할 수 있고 가능한 한 전체 플랫폼에서 작동하는 한 아무 것도 될 수 있습니다.

편집 : : 대략적인 스케치를 만들었지 만 StackOverflow를 사용하려면 게시하려면 10 개의 평판이 필요하므로 링크를 배치합니다.

No segments illuminated ---------------------------- Some segments illuminated
-

Answer 1

당신은 쉽게 Canvas 요소를 사용할 수 있습니다 시작 및 끝 위치를 제어하여 호 스트로크를 그립니다. 계량기의 눈금 아래에 구성하십시오.

다음은 게이지가 "전체"인 방법을 선택하기 위해 0에서 1까지의 값을 사용하는 방법의 예입니다. 미치의 요청에 따라

ApplicationWindow { 
    visible: true 
    width: 500 
    height: 500 

    Canvas { 
     id: canvas 
     anchors.fill: parent 
     rotation: -90 

     onPaint: { 
      var c = getContext('2d') 
      c.clearRect(0, 0, width, height) 
      c.beginPath() 
      c.lineWidth = 30 
      c.strokeStyle = "red" 
      c.arc(250, 250, 250 - 15, 0, Math.PI * 2 * circ.value) 
      c.stroke() 
     } 
    } 

    Slider { 
     id: circ 
     minimumValue: 0 
     maximumValue: 1 
     value: maximumValue/2 
     onValueChanged: canvas.requestPaint() 
    } 
} 

, 나는 설명 - 캔버스는 Qt는 호를 그리는 방식 때문에 90 CCW 정도에 회전 - 그들은 "12시"에서 시작되지 않지만 3에서 당신은 제거 할 수 있습니다 캔버스의 회전은 여분의 물건을 그릴 때 유용 할 수 있습니다. 회전 된 캔바스에 바로 자리 잡기 위해 모든 도면 오프셋을 90도에서 오프셋하고 싶지 않을 것입니다. 회전을 제거하기 위해서 필요한 모든 것 3시 방향에서 시작하는 아트를 설명하기 위해 범위가 -Math.PI * 0.5에서 Math.PI * 1.5 인 아크를 그립니다.