Cosa è necessario per rendere consapevole l'elemento Canvas di QtQuick 2 HiDPI- (retina-)?

Question

Ho la seguente applicazione QML:

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

     } 
    } 
} 

Questo produce due cerchi neri accanto all'altro. Quello di sinistra (Rectangle) è nitido su un display Retina, mentre quello di destra (Canvas) è piuttosto sfocato. Se aggiungo

   antialiasing: false 

al Canvas, produce pixel sfocate grossolani.

Cosa è necessario fare per rendere sensibile il sistema HiDPI Canvas?

_{(sto usando Qt 5.2.0 beta 1 su Mac OS X 10,8)}

---

Edit: La soluzione mi è venuta è stato quello di avvolgere il Canvas in un Item, scala tutto all'interno onPaint e quindi utilizzare uno transform sullo Canvas la scala indietro.

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

Abbiamo usato lo stesso trucco di raddoppiare le dimensioni, quindi ridimensionamento per il ProgressCircle in qml-material. Tuttavia, è possibile apportare alcuni miglioramenti:

1. Utilizzare scale anziché transform.
2. Utilizzare Screen.devicePixelRatio dal modulo QtQuick.Window invece di codificare il fattore di scala su 2/0,5.

Quindi il codice può essere semplificata per:

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) 

     // ... 
    } 
}