Forums

OverviewFelgo 2 Support (Qt 5) › How to scale Canvas and Image?

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #17913

    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>

    #17921

    Günther
    Felgo 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

     

    #17923

    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?

     

     

    #17925

    Günther
    Felgo 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

    #17926

    Niyazi

    Thanks a lot.

Viewing 5 posts - 1 through 5 (of 5 total)

RSS feed for this thread

You must be logged in to reply to this topic.

Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
FREE!
create apps
create games
cross platform
native performance
3rd party services
game network
multiplayer
level editor
easiest to learn
biggest time saving
best support