[Niyazi]

<div>Hi,
I have created a background.qml. It contrains Canvas and Image. When I scale the app the logo image
get distorted. So, how to scale canvas and image?</div>
<div></div>
<div></div>
<div>import QtQuick 2.7
import QtGraphicalEffects 1.0</div>
<div>Rectangle {
property alias gradBegin: secGradBegin.color
property alias gradEnd: secGradEnd.color
property real beginCutRatio: 0.33
property int headerHeight: secCanvas.height</div>
<div>    id: secRoot</div>
<div>    Canvas {
</div>
 
<div>property int beginCut: height * 0.7
property int widthOffset: width * 0.1
id: secCanvas</div>
<div>        width: parent.width
height: parent.height * secRoot.beginCutRatio
antialiasing: true
renderTarget: Canvas.Image
onPaint: {
var ctx = getContext(“2d”)
ctx.reset()</div>
<div>            ctx.beginPath()
ctx.rect(0, 0, width, beginCut)
ctx.moveTo(-widthOffset, beginCut)
ctx.bezierCurveTo(-widthOffset, height, width + widthOffset,
height, width + widthOffset, beginCut)</div>
<div>            ctx.closePath()
ctx.fill()
ctx.clip()
}
visible: false
}</div>
<div>    Image {
id: secImage
fillMode: Image.Stretch
anchors.fill: secCanvas
sourceSize.width: parent.width
sourceSize.height: secCanvas.height
smooth: true
visible: false
source: “../../../assets/logo.png”
}</div>
<div>    LinearGradient {
id: secGradient
anchors.fill: secRoot
gradient: Gradient {
GradientStop {
id: secGradBegin
position: 0.0
}
GradientStop {
id: secGradEnd
position: 1.0
}
}
}</div>
<div>    OpacityMask{
source: secImage
maskSource: secCanvas
width: parent.width
height: secCanvas.height
}
}</div>

[GüntherFelgo Team]

Hi,

I had a short look at the code, I see that you are setting the Image like this:

 Image {
  id: secImage
  fillMode: Image.Stretch
  anchors.fill: secCanvas
  sourceSize.width: parent.width
  sourceSize.height: secCanvas.height
}

First of all, the sourceSize of the Image usually holds the original image size, which you can use e.g. for calculations. You can specify your desired images size with the default width and height properties, similar to any other QML item.

The image also allows you to configure how you want the image to fill the area you specify as width/height. fillMode: Image.Stretch will destort/stretch the image to fit into the size you defined. Other options are e.g. Image.PreserveAspectFit, which fits the image to your specified size, but keeps the original aspect ratio.

For more information please see the Image documentation.

Best,
Günther

 

[Niyazi]

Thanks Günther. I was talking about How to scale Canvas and Image with Felgo. I already check the link before (https://doc-snapshots.qt.io/qt5-dev/qml-qtquick-image.html). 

For my understanding in my example of ../assets/logo.png. I should create a +hd and +hd2 folder. the orijinal logo is 75 x 300.

I have to create another logo.png with 150 x 600 and put in the +hd folder so on. then instead of using

 

Image {
id: secImage

…

can I use

 

MultiResolutionImage { 

 

so my logo cant get distorted in different screen size?

 

 

[GüntherFelgo Team]

Hi Niyazi,

yes, the MultiResolutionImage is basically a simple image type, which switches the underlying image source based on the device screen resolution / density.

Best,
Günther

[Niyazi]

Thanks a lot.