Co jest konieczne, aby element Canvas QtQuick 2 HiDPI- (retina-) był świadomy?

Question

Mam następujący QML aplikację:

import QtQuick 2.1 
import QtQuick.Controls 1.0 
import QtQuick.Layouts 1.0 
import QtQuick.Window 2.0 

ApplicationWindow { 
    id: window 
    width: 480 
    height: 240 


    RowLayout { 

     Rectangle { 
      width: window.height 
      height: window.height 
      radius: window.height/2 
      color: "black" 
     } 

     Canvas { 
      id: canvas 
      width: window.height 
      height: window.height 

      onPaint: { 
       var ctx = canvas.getContext('2d'); 
       var originX = window.height/2 
       var originY = window.height/2 
       var radius = window.height/2 

       ctx.save(); 

       ctx.beginPath(); 
       ctx.arc(originX, originY, radius, 0, 2 * Math.PI); 
       ctx.fillStyle = Qt.rgba(0, 0, 0, 1); 
       ctx.fill(); 

       ctx.restore(); 
      } 

     } 
    } 
} 

To daje dwa czarne kółka obok siebie. Lewa (Rectangle) jest wyraźna na wyświetlaczu Retina, podczas gdy prawa (Canvas) jest dość rozmyta. Jeśli dodaję do Canvas, generuje on nieostre rozmyte piksele.

Co muszę zrobić, aby urządzenie świadczyło o HiDPI Canvas?

_{(używam Qt 5.2.0 beta 1 na Mac OS X 10,8)}

---

Edit: Obejście wymyśliłem było owinąć Canvas w Item, skalę wszystko wewnątrz onPaint, a następnie użyj transform na Canvas w skali z powrotem.

Canvas { 
     id: canvas 
     x: 0 
     y: 0 
     width: parent.width * 2 // really parent.width after the transform 
     heigth: parent.height * 2 // really parent.height after the transform 

     /* ... */ 

     // This scales everything down by a factor of two. 
     transform: Scale { 
      xScale: .5 
      yScale: .5 
     } 

     onPaint: { 
      var ctx = canvas.getContext('2d'); 
      ctx.save(); 
      ctx.scale(2, 2)  // This scales everything up by a factor of two. 

      /* ... */ 
     } 
    } 

Answer 1

Wykorzystaliśmy ten sam trick podwojenie rozmiaru, a następnie skalowanie w dół do ProgressCircle in qml-material. Istnieje jednak kilka ulepszeń, które możesz wprowadzić:

1. Użyj scale zamiast transform.
2. Użyj parametru Screen.devicePixelRatio z modułu QtQuick.Window zamiast kodowania współczynnika skali o wartości 2/0,5.

Więc kod można uprościć do:

Canvas { 
    property int ratio: Screen.devicePixelRatio 

    width: parent.width * ratio 
    heigth: parent.height * ratio 
    scale: 1/ratio 

    onPaint: { 
     var ctx = canvas.getContext('2d'); 
     ctx.save(); 
     ctx.scale(ratio, ratio) 

     // ... 
    } 
}