2014-04-25 19 views
8

In QML ho creato una vista Rectangle con un set di elementi Image al suo interno. Non riesco a far funzionare la proprietà smooth, che è impostata su true sia per la vista che per le immagini. Ho provato a ridimensionare le immagini e ad aumentare la visualizzazione. A prescindere da ciò che faccio, ottengo un'immagine scalettata e seghettata. Mi sto perdendo qualcosa?QML Immagine liscia proprietà non funzionante

Sto lavorando con Qt 5.2 e sto usando un QtQuick2ApplicationViewer (sottoclasse di QQuickView) come la mia vista principale.

Ho trovato soluzioni in cui viene applicata la levigatura sostituendo il gestore di immagini nel motore, ma ritengo che la proprietà smooth debba funzionare appena fuori dalla scatola.

Codice:

Image { 
    source: "image_400x400.png" 
    width: 400 
    height: 400 
    smooth: true 

    transform { 
     Scale {xScale: 0.25; yScale: 0.25} 
    } 
} 

Secondo tentativo:

Image { 
    source: "image_400x400.png" 
    width: 100 
    height: 100 
    smooth: true 
} 

terzo tentativo:

Rectangle { 
    width: 400 
    height: 400 
    smooth: true 

    Image { 
     source: "image_400x400.png" 
     width: 400 
     height: 400 
     smooth: true 
    } 

    transform { 
     Scale {xScale: 0.25; yScale: 0.25} 
    } 
} 

ottengo lo stesso risultato ogni volta.

Aggiornamento: come suggerito da Nejat, ho provato la nuova proprietà Qt 5 antialiasing. Il risultato migliora, ma quando il ridimensionamento sotto i bordi di 0,5x risulta ancora un po 'frastagliato. C'è un modo per cambiare la qualità dell'antialiasing?

Da sinistra a destra:

  • output atteso (scalato con Photoshop, inedito)
  • antialiasing e smooth abilitato
  • solo smooth abilitato

Three antialiasing results with zoom

I' m anche vinto ancora dering why smooth non fa nulla.

risposta

6

Per il downsampling regolare è necessario mipmap!

Con Qt 5.3 (che sarà rilasciato molto presto) questo funzionerà:

Image { 
    source: "image_400x400.png" 
    width: 100 
    height: 100 
    mipmap: true 
} 

Per Qt 5.2 è possibile provare quanto segue come alternativa di qualità superiore per il vostro approccio multisampling:

ShaderEffectSource { 
    id: src 
    sourceItem: Image { source: "image_400x400.png" } 
    mipmap: true 
} 

ShaderEffect { 
    width: 100 
    height: 100 
    property var source: src 
} 

Se non è necessario modificare la scala dell'immagine in modo dinamico, l'approccio ottimale (per tutte le versioni importanti Qt) è questo:

Image { 
    source: "image_400x400.png" 
    sourceSize.width: 100 
    sourceSize.height: 100 
} 

L'immagine sarà ridimensionata di alta qualità sulla CPU e quindi caricata nella GPU. Tieni presente che, poiché le informazioni sull'immagine vengono perse, appariranno peggiori se visualizzate nella scala dell'immagine originale.

quanto riguarda la proprietà smooth:

La smooth proprietà di un Image consente interpolazione lineare. È attivato per impostazione predefinita ed è un miglioramento rispetto a nearest-neighbor interpolation, che viene utilizzato quando smooth = false; ma non aiuta molto per il downscaling.

Per quanto riguarda la proprietà antialising:

Impostazione antialiasing = truenon cambiare la qualità della scala dell'immagine a tutti. Rende semplicemente i bordi, che potrebbero essere importanti quando l'immagine viene ruotata.

+0

Questo è davvero elaborato, grazie Kay!Ora sto scherzando: funziona, ma il risultato immediato ha tanto aliasing che si sta facendo sfocato quando ridimensiono le immagini più di 4x. Immagino che scrivere effetti shader personalizzati sia il prossimo passo? Potrei semplicemente limitarmi alla soluzione per il formato di superficie che ho postato in precedenza per mantenere le cose semplici. – Robbert

+0

Grazie ancora a Kay, 'mipmap: true' ha effettivamente risolto il problema a partire da Qt 5.3. – Robbert

+0

Grazie! Ho passato un buon quarto d'ora a rinunciare alla proprietà di 'antialias' chiedendomi perché non stava facendo nulla ... –

1

È necessario impostare la proprietà "antialiasing" su true. Può essere impostato su qualsiasi oggetto, inclusa la tela. Dalla documentazione:

utilizzati principalmente nel rettangolo e gli elementi di immagine in base per decidere se la voce dovrebbe usare l'antialiasing o meno. Gli elementi con antialiasing abilitato richiedono più memoria e sono potenzialmente più lenti da eseguire il rendering.

Il valore predefinito è falso

in modo che possa essere come:

Image { 
    source: "image_400x400.png" 
    width: 100 
    height: 100 
    smooth: true 
    antialiasing: true 
} 
+0

Grazie Nejat! Sembra che l'antialiasing sia una nuova proprietà in Qt 5. Migliora il rendering, ma il risultato è ancora un po 'frastagliato. – Robbert

+0

Ho aggiornato la mia risposta con il risultato del tuo suggerimento. Mi sento ancora come se la proprietà 'smooth' dovesse fare la differenza (non fa ancora nulla) e dovrei essere in grado di impostare la qualità dell'antialiasing in qualche modo. qualche idea? – Robbert

+0

Per fare in modo che l'immagine abbia un bell'aspetto durante lo stretching, ti suggerisco di usare l'immagine svg invece dell'immagine png. – Nejat

0

Update: come di Qt 5.3, la proprietà mipmap risolve il problema. La risposta sotto si applica solo a Qt 5.2 o precedente.

L'aggiunta della proprietà antialiasing (da Qt 5) ha fatto ciò che ci si aspetta dalla proprietà smooth. Grazie per quello, Nejat. Tuttavia, come posto nella domanda aggiornata, la qualità dell'antialiasing è ancora negativa. Per risolvere questo problema, definire un formato personalizzato superficie per impostare una frequenza di campionamento di antialiasing personalizzato (estratto da main.cpp):

QtQuick2ApplicationViewer view; 

QSurfaceFormat format; 
format.setSamples(16); 
view.setFormat(format); 

Vedere la documentazione: QSurfaceFormat::setSamples.

Molti suggeriscono di utilizzare SVG anziché PNG. Nella mia esperienza, almeno con l'impostazione predefinita di Qt Quick, gli SVG vengono campionati ad una certa dimensione e vengono quindi trattati esattamente come i PNG.