title: QML canvas zoom and scroll/pan
body: <p>I'm trying to make a canvas in QML in which you can scroll/pan and zoom. I'm having troubles with the sizing of the canvas. When I zoom out, The size of the canvas becomes smaller and I get an area of no canvas on the right and the bottom. I have tried a lot and nothing seems to work. Here's a QML example:</p>
  
  <pre><code>import QtQuick 2.2
  import QtQuick.Controls 1.1
  import QtQuick.Window 2.1
  
      Rectangle {
          id: modellerDatapane
  
          property double factor : 1.5
  
          ScrollView {
              id: scrollCanvas
              anchors.fill: parent
  
              Flickable{
                  id: flickableCanvas
                  anchors.fill: parent
                  contentWidth: canvas.width
                  contentHeight: canvas.height
  
                  Canvas {
                      Rectangle{
                          border.width: 20
                          color: "transparent"
                          border.color: "red"
                          anchors.fill:parent
                      }
  
                      property bool fill: true
                      property bool stroke: true
                      property real alpha: 1.0
                      property real scale : 5
                      property real rotate : 5
                      antialiasing: true
  
                      id: canvas
                      height: 5000
                      width: 5000
  
                      state : "visible"
                      transform : Scale{
                          id : tform
                      }
  
                      onPaint: {
                          console.log("painted")
                          var ctx = canvas.getContext('2d');
                          var originX = 100
                          var originY = 100
                          ctx.save();
                          ctx.clearRect(0, 0, 500, 500);
                          ctx.translate(originX, originX);
                          ctx.globalAlpha = 1;
                          ctx.strokeStyle = "blue";
                          ctx.fillStyle = "yellow";
                          ctx.lineWidth = 3;
  
                          ctx.translate(originX, originY)
                          ctx.scale(tform.xScale, tform.yScale);
                          ctx.rotate(1);
                          ctx.translate(-originX, -originY)
  
                          ctx.beginPath();
                          ctx.moveTo(75,40);
                          ctx.bezierCurveTo(75,37,70,25,50,25);
                          ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
                          ctx.bezierCurveTo(20,80,40,102,75,120);
                          ctx.bezierCurveTo(110,102,130,80,130,62.5);
                          ctx.bezierCurveTo(130,62.5,130,25,100,25);
                          ctx.bezierCurveTo(85,25,75,37,75,40);
                          ctx.closePath();
                          if (canvas.fill)
                              ctx.fill();
                          if (canvas.stroke)
                              ctx.stroke();
                          ctx.restore();
  
                      }
  
  
                      MouseArea {
                          parent: scrollCanvas
                          anchors.fill: canvas
                          propagateComposedEvents: true
  
                          onWheel: {
                              if(wheel.angleDelta.y &gt; 0){  // zoom in
                                  canvasZoomIn();
                              }
                              else{                        // zoom out
                                  canvasZoomOut();
                              }
                          }
                          onPressed:{
                              mouse.accepted = false
                          }
                          onPositionChanged:{mouse.accepted = false}
                          onReleased:{mouse.accepted = false}
                      }
                  }
  
              }
          }
  
          function canvasZoomOut(){
              scaleCanvas(1/factor);
  
          }
  
          function canvasZoomIn(){
              scaleCanvas(factor);
  
          }
  
          function scaleCanvas(scaleFactor){
              tform.xScale *=scaleFactor;
              tform.yScale *=scaleFactor;
              canvas.height *= scaleFactor;
              canvas.width *= scaleFactor;
          }
  
      }
  </code></pre>
  
  <p>This is what the canvas looks like (the canvas is red, the white area is nothing):</p>
  
  <p><a href="http://i.stack.imgur.com/mnrxW.png" rel="nofollow">This is what it looks like when you scroll all the way to the right, without zooming. (You can't scroll out of the canvas)</a></p>
  
  <p><a href="http://i.stack.imgur.com/aDo2C.png" rel="nofollow">This is what it looks like when you zoom out one step, and scroll to the right. (The scroll bar is too long and you can scroll out)</a></p>