I am working with QML to try to display an image. I have the following code:
Rectangle {
id: border
anchors {
top: parent.top;
topMargin: vpx(20);
right: parent.right;
}
color: "black"
z: 6
width: 500
height: 750
Image {
id: picture
width: parent.width
height: parent.height
transformOrigin: Item.Center
rotation: (implicitWidth/implicitHeight > 1.3) ? 270 : 0
anchors.fill: border
fillMode: Image.PreserveAspectFit
source: ".../pic.png"
}
If rotation is set to 0, it scales correctly to fill the rectangle. If rotation is set to 270, it doesn't fill the rectangle - it rotates correctly, but it is well within the rectangle in both directions. It should have scaled up more.
Why is this happening?
EDIT: The code above has been edited. All of the above code is within a larger rectangle. The purpose of this code is to rotate images 90 degrees when they have a width > height. When rotation is set to 0 (i.e. height > width and no rotation needed), the picture displays as the first case below. When set to 270 (i.e. width > height, rotation needed), the picture displays as the second case below. I would like it to be comparable to the first picture, which fills the width, as I understand "fillMode: Image.PreserveAspectFit" should work.
black is rectangle, red is the image.
It is kind of tricky, but you can try this way:
Rectangle {
id: border
anchors {
top: parent.top;
right: parent.right;
}
color: "black"
z: 6
width: 500
height: 750
Item {
id: pictureItem
transformOrigin: Item.Center
rotation: (picture.implicitWidth/picture.implicitHeight > 1.3) ? 270 : 0
anchors.centerIn: parent
width: rotation == 270 ? parent.height : parent.width
height: rotation == 270 ? parent.width : parent.height
Image {
id: picture
anchors.fill: parent
fillMode: Image.PreserveAspectFit
source: ".../pic.png"
}
}
}
I have prepared two test images:
And this is what I get with above chunk of code:
Related
I am learning Qml newly and i am trying to customize a slider as below
Animation to SliderBar & Text
And i was unable to figure the part how to apply animation or color the slider with thick red when slider handle is being dragged and apply fade out animation to text in parallel when the slider handle is being dragged.
I tried with ColorAnimation to achieve the coloring slider when handler is dragging and text part not able to figure out.
Attaching the code that i tried to achieve the expectation
Slider{
id:control
background: Rectangle{
x: control.leftPadding
y: control.topPadding + control.availableHeight / 2 - height / 2
implicitWidth: 331
implicitHeight: 68
width: control.availableWidth
height: implicitHeight
radius: 10
color: '#cc0000'
//opacity: 0.4
border.color: "#cc0000"
Rectangle{
width: control.visualPosition * parent.width
height: parent.height
color: "blue"
radius: 10
}
}
handle: Rectangle {
id: sliderHandle
property int fnValu : control.leftPadding + control.visualPosition * (control.availableWidth- width)
x: control.leftPadding + control.visualPosition * (control.availableWidth- width)
y: control.topPadding + control.availableHeight / 2 - height / 2
implicitHeight: 70
implicitWidth: 88
radius: 10
Text{
anchors.centerIn: parent
text: "SOS"
}
gradient: Gradient {
GradientStop { position: 1.0; color: '#990000' }
GradientStop { position: 0.0; color: '#cc0000' }
}
}
}
Attaching image of what i was able to achieve
What i achieved
If anyone now's how to render the text and apply fade out animation to the text when slider handle is being dragged, help is much appreciated.
Thanks in advance !!
Regarding the animation on the fading out your text. You could do the following without even the need of an animation react to onPositionChanged of the slider and change the opacity property of the text.
Edit: Adjusted my answer to your code changes.
Slider{
id:control
onPositionChanged:{
backgroundText.opacity = 1-position
}
background: Rectangle{
x: control.leftPadding
y: control.topPadding + control.availableHeight / 2 - height / 2
implicitWidth: 331
implicitHeight: 68
width: control.availableWidth
height: implicitHeight
radius: 10
color: '#cc0000'
//opacity: 0.4
border.color: "#cc0000"
Rectangle{
width: control.visualPosition * parent.width
height: parent.height
color: "blue"
radius: 10
}
Text{
id:backgroundText
text: "Slide to Send"
color:"black"
anchors{
centerIn: parent
}
}
}
handle: Rectangle {
id: sliderHandle
property int fnValu : control.leftPadding + control.visualPosition * (control.availableWidth- width)
x: control.leftPadding + control.visualPosition * (control.availableWidth- width)
y: control.topPadding + control.availableHeight / 2 - height / 2
implicitHeight: 70
implicitWidth: 88
radius: 10
Text{
anchors.centerIn: parent
text: "SOS"
}
gradient: Gradient {
GradientStop { position: 1.0; color: '#990000' }
GradientStop { position: 0.0; color: '#cc0000' }
}
}
}
I need to save a QML item as image. I use grabToImage() method (https://doc.qt.io/qt-5/qml-qtquick-item.html#grabToImage-method) and it works well when my item is completely on the screen. But the item is a ScrollView and sometimes it's parts are outside the view. And I want to have full item on image. is it possible?
Here is an example to my problem:
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.2
Window {
width: 640
height: 480
visible: true
title: qsTr("Example")
Button {
text: qsTr("Save as image")
onClicked: {
scheme.grabToImage(function(result) {
result.saveToFile("temp.png")
});
}
}
ScrollView {
id: scheme
y: 50
clip: true
width: 400
height: 200
contentWidth: rect.width
contentHeight: rect.height
Rectangle {
id: rect
width: 600
height: 400
color: "gray"
Rectangle {
x: 0
y: 0
width: 100
height: 100
color: "blue"
}
Rectangle {
x: 500
y: 300
width: 100
height: 100
color: "red"
}
}
}
}
Instead of grabbing the ScrollView (which only has size of 400x200), grab the child of ScrollView (which is the full 600x400).
rect.grabToImage(function(result) {
result.saveToFile("temp.png")
});
I'd like to be able to bottom align an image using Image or ImageBackground, but have been unsuccessful in doing so.
<View style={styles.moduleHeader}>
<ImageBackground
style={styles.image}
source={{ uri: image }}
resizeMode="cover">
<Text>text</Text>
</ImageBackground>
</View>
moduleHeader: {
height: 200,
},
image: {
width: Layout.viewport.width, //device width
height: 200,
position: "absolute",
bottom: 0,
},
Other attempts include negative top margin and padding.
I've also messed around with aspect ratio, but that needs to be more of a precise number, and I don't need that level of precision.
The inclusion of absolute and bottom have no effect that I can tell...
Basically Id like to mimic the effect background-position: center bottom; has in CSS.
I don't mind if the image is cropped horizontally, just that the bottom of the image is aligned with the bottom of the container.
I haven't been able to find with any certainty that this is even possible in React-Native, so confirmation of that theory would constitute a correct answer.
As always any and all direction is greatly appreciated so thanks in advance!
You need to remove position and bottom tag from ImageBackground style and add into style of View
Something like this
moduleHeader: {
height: 200,
width:'100%',
position: "absolute",
bottom: 0,
},
image: {
width:'100%', //device width
height: 200,
backgroundColor:"#000",
},
Please check this snack expo code
https://snack.expo.io/#vishal7008/again-bottom-ui
I'm looking for a solve for my example. I want drag a corner of rectangle and it will change scale but when i drag corner to zoom out rectangle then it error.
Please, give a solve. Thanks very much!
======================================================================================================================================================
My code:
import QtQuick 2.9
import QtQuick.Window 2.2
Window {
title: qsTr("Test Crop")
width: 640
height: 480
visible: true
property double photohfake: selComp.height
property double photowfake: selComp.width
property double photowold: selComp.width
property double photohold: selComp.height
Image {
id: image1
anchors.fill: parent
source: "http://dongdomobile.vn/wp-content/uploads/2014/09/Cute-Grey-Seamless-Pattern-For-Website-Background-300x136.jpg"
Rectangle {
x:parent.width / 4
y: parent.height / 4
width: parent.width / 2
height: parent.width / 2
id: selComp
border {
width: 2
color: "steelblue"
}
color: "#354682B4"
Rectangle {
width: 18
height: 18
color: "steelblue"
anchors.verticalCenter:parent.top
anchors.horizontalCenter: parent.left
MouseArea {
anchors.fill: parent
drag{ target: parent; axis: Drag.XAndYAxis }
onPositionChanged: {
console.log("mouseX "+mouseX)
console.log("mouseY "+mouseY)
if(drag.active){
photohfake=photohfake-mouseY //calculator new height
selComp.scale=selComp.scale/photohold*photohfake //calculator new scale
photowfake=photowold*photohfake/photohold //calculator new width
selComp.x+=(photowold-photowfake)/2
selComp.y+=mouseY/2
console.log("photohfake "+photohfake)
console.log("photohold "+photohold)
photohold=photohfake
photowold=photowfake
console.log("selComp.scale "+selComp.scale)
if(selComp.scale<0.5)
selComp.scale=0.5
else if(selComp.scale>4)
selComp.scale=4
}
}
}
}
}
}
}
If by errors you mean the rectangle moving weirdly when resizing, this should fix it:
import QtQuick 2.9
import QtQuick.Window 2.2
Window {
title: qsTr("Test Crop")
width: 640
height: 480
visible: true
Rectangle {
id: image1
anchors.fill: parent
color: "lightgrey"
Rectangle {
x:parent.width / 4
y: parent.height / 4
width: parent.width / 2
height: parent.width / 2
id: selComp
border {
width: 2
color: "steelblue"
}
color: "#354682B4"
Rectangle {
width: 18
height: 18
color: "steelblue"
anchors.verticalCenter:parent.top
anchors.horizontalCenter: parent.left
MouseArea {
anchors.fill: parent
drag{ target: parent; axis: Drag.XAndYAxis }
onPositionChanged: {
if(drag.active){
var delta = Math.max(mouseX, mouseY)
var newWidth = selComp.width - delta
var newHeight = selComp.height - delta;
if (newWidth < width || newHeight < height)
return
selComp.width = newWidth
selComp.x = selComp.x + delta
selComp.height = newHeight
selComp.y = selComp.y + delta
}
}
}
}
}
}
}
I've created this QML window but when I grab it's border with a mouse and resize it contents of window are repainted very slow. You can clone my repo and test it yourself. Any ideas how to improve performance?
import QtQuick 2.0
Rectangle {
id: root
width: 600
height: 600
color: "lightgrey"
ListView {
model: mainModel
spacing: 5
width: parent.width
orientation: ListView.Horizontal
delegate: Rectangle {
//width: parent.desiredWidth / mainModel.dataLen()//+ " " + model.sort
width: root.width / mainModel.dataLen() - 10
//width: 200
ListView {
id: lv1
ScrollBar {
flickable: lv1
vertical: true
hideScrollBarsWhenStopped: false
scrollbarWidth: 5
}
model: homm
spacing: 5
width: parent.width
height: 150
orientation: ListView.Vertical
delegate:
Rectangle {
radius: 5
anchors.rightMargin: 5
anchors.leftMargin: 5
width: lv1.width
height: 20
color: "black"
Text { text: model.name
anchors.fill: parent
color: "white"
}
}
}
}
}
}
In this QML I have listView of listViews which visualize ListModel of ListModels. homm is a property name for main model. Inner models' elements have a property named name. You can browser code of these classes here and here.