Come posso disegnare un'ombra esterna per un elemento visivo Rectangle
su QtQuick 2.0?
Mi piace disegnare un'ombra esterna per la mia finestra principale (ho una finestra trasparente e non decorata)Come creare un'ombra esterna per Rettangolo su QtQuick 2.0
risposta
Come soluzione alternativa per il rilascio ombra tagliato, si può mettere il Rectangle
in un Item
, con un margine additionnal a prendere raggio di sfocatura in conto, e applicare ombra sul quel contenitore:
import QtQuick 2.0
import QtGraphicalEffects 1.0
Item {
width: 320
height: 240
Item {
id: container
anchors.centerIn: parent
width: rect.width + (2 * rectShadow.radius)
height: rect.height + (2 * rectShadow.radius)
visible: false
Rectangle {
id: rect
width: 100
height: 50
color: "orange"
radius: 7
antialiasing: true
border {
width: 2
color: "red"
}
anchors.centerIn: parent
}
}
DropShadow {
id: rectShadow
anchors.fill: source
cached: true
horizontalOffset: 3
verticalOffset: 3
radius: 8.0
samples: 16
color: "#80000000"
smooth: true
source: container
}
}
Domanda interessante ... Ho cercato un modo migliore per farlo. Questo è il mio modo rapido e sporco di realizzare un effetto ombra esterna per un rettangolo QML per il momento.
Rectangle{
width: 500
height: 500
color: "dark grey"
Rectangle {
id: backgroundRect
width: 200
height: 150
radius: 5
anchors.centerIn: parent
color: "red"
Rectangle {
id: dropShadowRect
property real offset: Math.min(parent.width*0.025, parent.height*0.025)
color: "purple"
width: parent.width
height: parent.height
z: -1
opacity: 0.75
radius: backgroundRect.radius + 2
anchors.left: parent.left
anchors.leftMargin: -offset
anchors.top: parent.top
anchors.topMargin: offset
}
}
}
Grazie, ma l'ombra risultato è molto piatta. Mi piace avere un'ombra liscia –
@ S.M.Mousavi sì, sono assolutamente d'accordo. L'unico modo per renderlo più agevole sarebbe scherzare con i gradienti ... Vorrei che ci fosse un'opzione migliore. – stackunderflow
Grazie @stackunderflow comunque :) –
Basta usare DropShadow
dal modulo QtGraphicalEffects
.
Un completo, esempio di lavoro:
import QtQuick 2.0
import QtGraphicalEffects 1.0
Rectangle {
width: 640
height: 480
color: "blue"
Rectangle {
id: rect
anchors.centerIn: parent
width: 100
height: 100
color: "red"
}
DropShadow {
anchors.fill: rect
cached: true
horizontalOffset: 3
verticalOffset: 3
radius: 8.0
samples: 16
color: "#80000000"
source: rect
}
}
Nota che si vedrà una serie di avvertimenti come questo:
di file: ///opt/Qt5.0.1/5.0.1/ gcc_64/qml/QtGraphicalEffects/DropShadow.qml: 391: 5: QML SourceProxy: Rilevato loop di binding per la proprietà "output" file: ///opt/Qt5.0.1/5.0.1/gcc_64/qml/QtGraphicalEffects/private/ GaussianDirectionalBlur.qml: 66: 5: QML SourceProxy: Rilevato loop di binding per la proprietà "output" file: ///opt/Qt5.0.1/5.0.1/gcc_64/qml/QtGraphicalEffects/private/GaussianDirectionalBlur.qml: 61: 5: QML SourceProxy: loop di rilegatura rilevato per la proprietà "output" file: /// opt/Qt5.0.1/5.0.1/gcc_64/qml/QtGraphicalEffects/private/GaussianDirectionalBlur.qml: 66: 5: QML SourceProxy: Rilevato loop di binding per la proprietà "output" file: ///opt/Qt5.0.1/ 5.0.1/gcc_64/qml/QtGraphicalEffects/private/GaussianDirectionalBlur.qml: 61: 5: QML SourceProxy: Rilevato loop di binding per la proprietà "output" file: ///opt/Qt5.0.1/5.0.1/gcc_64/ qml/QtGraphicalEffects/private/GaussianGlow.qml: 53: 5: QML SourceProxy: Rilevato loop di binding per la proprietà "output"
Questi avvisi sono QTBUG-28521, che è stato corretto in Qt 5.0.2 (che al momento della stesura di questo documento non è ancora stato rilasciato). Fortunatamente, non c'è nessun problema reale, a parte la fastidiosa uscita della console.
No! l'ombra risultante è molto solida/piatta. Mi piace avere un'ombra liscia. –
Scommetto che il motivo per cui non svanisce gradualmente è a causa di questo problema: http://stackoverflow.com/q/14576547/331041 – cgmb
Accetto ...Immagino che questo sia il mio problema –
ho provato il codice sopra e infatti aggiunge un'ombra, anche se nel mio caso semplicemente aggiungendo un altro rettangolo con un bit su un offset mi ha dato un effetto che mi è piaciuto di più.
Rectangle{
id: rec_Shadow
height:rect_withShadow.height
width: rect_withShadow.width
border.color: "#B3B3B3"
color: "#C5C5C5"
anchors{
verticalCenter: rect_withShadow.verticalCenter
horizontalCenter: rect_withShadow.horizontalCenter
horizontalCenterOffset: 5
verticalCenterOffset: 5
}
radius: rect_withShadow.radius
}
Poi si aggiunge il rettangolo in cui si desidera l'ombra, e si chiamano rect_withShadow
- 1. Come creare la barra di scorrimento in QtQuick 2.0?
- 2. Come installare QtQuick 1.1 su QT 5.1.1
- 3. Rendering opengl personalizzato in qt5's qtquick 2.0
- 4. Disegna rettangolo su SurfaceView
- 5. Disegno rettangolo su picturebox - come limitare l'area del rettangolo?
- 6. UIView con rettangolo arrotondato e ombra esterna: l'ombra appare sopra il rettangolo
- 7. Disegno rettangolo su JPanel
- 8. Menubar in QtQuick Controls 2
- 9. Come creare una chiave esterna in phpmyadmin
- 10. QtQuick, immagini dinamiche e C++
- 11. Come posso creare un rettangolo con un bordo delineato?
- 12. Creare personalizzato PSObject PowerShell 2.0
- 13. Come creare un rettangolo in Graphics in un colore trasparente?
- 14. Hangouts per Android SMS 2.0 2.0
- 15. XSLT 2.0 Ricerca esterna tramite chiave() e documento()
- 16. Script per aggiungere un indice su ogni chiave esterna?
- 17. Utilizzo della riproduzione 2.0 per creare un servizio web
- 18. Come creare proprietà raggruppate/annidate?
- 19. OAuth 2.0 su C++ (per UNIX)
- 20. come creare una cartella in Android Directory di archiviazione esterna?
- 21. Creare una chiave esterna per le tabelle di sistema
- 22. Qt5 Errore QML QtQuick QtGraphicalEffects non è installato
- 23. Chiave esterna non riesce a creare
- 24. WPF: Ruota rettangolo e posizionalo su tela
- 25. Android SDK - camera2 - Disegna rettangolo su TextureView
- 26. Impossibile creare una libreria OpenSSL esterna per Android NDK su Windows/Cygwin
- 27. Come disegnare un rettangolo?
- 28. rettangolo di disegno su tela Android
- 29. Come creare un file eseguibile del progetto java fx 2.0
- 30. Evento click per rettangolo SVG
L'ho dimenticato, ma dovresti specificare 'visible: false' sul contenitore Item, perché l'effetto DropShadow duplica l'elemento sorgente da solo, quindi eviterà strani problemi di rendering. – TheBootroo
Sì !!! Questo trucco ha risolto il mio problema ... Grazie :) –