solitare/qml/DrawPile.qml
ItsDrike d21e9d1336
Fix SVG scaling in QML
For some reason, the default QML Image element doesn't scale SVGs like
it should. Essentially, it just reads the source size of the SVG and
scales it like it would a regular image (say PNG).

I'm fixing this by manually setting the source size of the image to the
current size. That said, this is in my opinion a hacky fix and it's
really weird that QML doesn't special-case SVGs and scale them as it
should.

Source:
https://stackoverflow.com/questions/69641034/qml-image-does-not-stretch-fit-svg
2024-12-09 20:57:51 +01:00

90 lines
2.1 KiB
QML

import QtQuick
import Solitare
Item {
id: drawPile
required property real cardWidth
required property real cardHeight
width: cardWidth
height: cardHeight
CardModel {
id: drawPileCard
anchors.fill: drawPile
visible: GameState.drawPile.length > 0
card: GameState.drawPile.length > 0 ? GameState.drawPile[GameState.drawPile.length - 1] : null
isFaceDown: GameState.drawPile.length > 0 ? true : false
}
Rectangle {
id: emptyPileRect
anchors.fill: parent
visible: GameState.drawPile.length === 0
color: "gray"
border.color: "white"
border.width: width * 0.03
opacity: 0.4
radius: width * 0.125
Image {
id: flipIcon
anchors.centerIn: parent
visible: GameState.throwawayPile.length > 0
source: "qrc:/img/flip_icon.svg"
width: parent.width * 0.5
height: width
// This makes sure the SVG scales properly, otherwise it would
// attempt to scale the image from the original source size, which
// can end up being blurry.
sourceSize: Qt.size(width, height)
fillMode: Image.Stretch
}
}
Rectangle {
id: cardCountBackground
color: "black"
opacity: 0.7
property real padding: Math.max(cardCountText.width, cardCountText.height) * 0.3
width: cardCountText.width + padding
height: cardCountText.height + padding
visible: drawPileCard.visible
anchors.bottom: parent.bottom
anchors.left: parent.left
anchors.margins: parent.width * 0.05
radius: parent.width * 0.1
z: 1 // Behind the text, but above the card
}
Text {
id: cardCountText
text: GameState.drawPile.length
color: "white"
font.pixelSize: parent.width * 0.2
font.bold: true
visible: drawPileCard.visible
anchors.centerIn: cardCountBackground
z: 2
}
MouseArea {
anchors.fill: parent
onClicked: GameState.drawNextCard()
}
}