Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt
  • Unsolved
Collapse
qtws26_logo

The Qt Event of the Year: Qt World Summit 2026

Save Your Spot >
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Canvas resize
Qt 6.12 LTS is out! See what's new in the release blog

Canvas resize

Scheduled Pinned Locked Moved QML and Qt Quick
12 Posts 2 Posters 6.0k Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • p3c0P Offline
    p3c0P Offline
    p3c0
    Moderators
    wrote on last edited by
    #2

    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

    157

    1 Reply Last reply
    0
    • ? Offline
      ? Offline
      A Former User
      wrote on last edited by
      #3

      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()
          }
      }
      

      }
      @

      1 Reply Last reply
      0
      • p3c0P Offline
        p3c0P Offline
        p3c0
        Moderators
        wrote on last edited by
        #4

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

        157

        1 Reply Last reply
        0
        • ? Offline
          ? Offline
          A Former User
          wrote on last edited by
          #5

          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.

          1 Reply Last reply
          0
          • p3c0P Offline
            p3c0P Offline
            p3c0
            Moderators
            wrote on last edited by
            #6

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

            157

            1 Reply Last reply
            0
            • ? Offline
              ? Offline
              A Former User
              wrote on last edited by
              #7

              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.

              1 Reply Last reply
              0
              • p3c0P Offline
                p3c0P Offline
                p3c0
                Moderators
                wrote on last edited by
                #8

                Here:

                http://imgur.com/KxXvvs0

                157

                1 Reply Last reply
                0
                • p3c0P Offline
                  p3c0P Offline
                  p3c0
                  Moderators
                  wrote on last edited by
                  #9

                  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.

                  157

                  1 Reply Last reply
                  0
                  • ? Offline
                    ? Offline
                    A Former User
                    wrote on last edited by
                    #10

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

                    1 Reply Last reply
                    0
                    • ? Offline
                      ? Offline
                      A Former User
                      wrote on last edited by
                      #11

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

                      Thanks p3c0

                      1 Reply Last reply
                      0
                      • p3c0P Offline
                        p3c0P Offline
                        p3c0
                        Moderators
                        wrote on last edited by
                        #12

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

                        157

                        1 Reply Last reply
                        0

                        • Login

                        • Login or register to search.
                        • First post
                          Last post
                        0
                        • Categories
                        • Recent
                        • Tags
                        • Popular
                        • Users
                        • Groups
                        • Search
                        • Get Qt
                        • Unsolved