Canvas resize



  • I'm trying to do so in order to "Canvas" accepted dimensions of the image. I need this is because I write "Canvas" to the file. All the time I get tired of that "Canvas" does not accept the dimensions of the new image. Maybe there is a person who knows how to solve it?

    Here is my broken code:

    @import QtQuick 2.2
    import QtQuick.Controls 1.1

    ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    menuBar: MenuBar {
        Menu {
            title: qsTr("File")
            MenuItem {
                text: qsTr("Exit")
                onTriggered: Qt.quit();
            }
        }
    }
    
    Image {
        id: myImage
        source: "http://i.snag.gy/5VVZR.jpg"
    }
    
    Canvas {
        anchors.bottom: parent.bottom
        width: myImage.width
        height: myImage.height
    
        onPaint: {
            var ctx = getContext("2d")
            ctx.drawImage(myImage, 0, 0)
        }
    }
    
    MouseArea {
        anchors.fill: parent
    
        onClicked: {
            myImage.source = "http://i.snag.gy/qLdPZ.jpg"
        }
    }
    

    }@


  • Moderators

    Hi,

    bq. “Canvas” does not accept the dimensions of the new image

    Do you mean you want to draw the image using canvas with certain width and height ?
    If so, then you can try this overloaded function
    @
    ctx.drawImage(myImage, 0, 0,50,50)
    @

    will draw image of dimension 50x50



  • I want to "Canvas" always accept what the image dimensions will be loaded.
    I also tried like you say.
    @import QtQuick 2.2
    import QtQuick.Controls 1.1

    ApplicationWindow {
    visible: true
    width: 640
    height: 480
    color: "blue"
    title: qsTr("Hello World")

    menuBar: MenuBar {
        Menu {
            title: qsTr("File")
            MenuItem {
                text: qsTr("Exit")
                onTriggered: Qt.quit();
            }
        }
    }
    
    Image {
        id: myImage
        source: "http://i.snag.gy/5VVZR.jpg"
        //onWidthChanged: myCanvas.width = width
        //onHeightChanged: myCanvas.height = height
    }
    
    Canvas {
        id: myCanvas
        anchors.bottom: parent.bottom
        width: myImage.width
        height: myImage.height
    
        onPaint: {
            var ctx = getContext("2d")
            ctx.drawImage(myImage, 0, 0)
            //ctx.drawImage(myImage, 0, 0, myImage.width, myImage.height)
        }
    }
    
    MouseArea {
        anchors.fill: parent
    
        onClicked: {
            myImage.source = "http://i.snag.gy/qLdPZ.jpg"
            //myCanvas.requestPaint()
        }
    }
    

    }
    @


  • Moderators

    Sorry, but i'm not actully understanding your question.
    Do you want to set the width and height of Canvas to that of myImage ?



  • bq. Sorry, but i’m not actully understanding your question.
    Do you want to set the width and height of Canvas to that of myImage ?

    Yes. I want to canvas element always have the same dimensions as the image even if I load another image with different dimensions.


  • Moderators

    Then your 1st code works as expected. I tested with Qt5.3.1



  • I have Qt 5.3. For me it looks like this.
    http://i.imgur.com/XT4j1E5.png
    http://i.imgur.com/icVU9nq.png

    Share your snapshots.


  • Moderators


  • Moderators

    May be it is taking time to load the other image on your network and hence unable to determine the size.
    You could try getting the "status":http://qt-project.org/doc/qt-5/qml-qtquick-image.html#status-prop of it and then assigning the dimensions.



  • I will install qt again. This may solve the problem.



  • I struggled with this for a few days, and the problem was solved by reinstalling Qt :)

    Thanks p3c0


  • Moderators

    That's strange. Did you notice anything during reinstallation that you might have missed in first ?


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.