Hi!
I want create project in QML to draw Rectangles and zoom in, zoom out as the same this video below.


I try use Canvas in QML but it draw very slow. So I want to use DirecX or OpenGL to it
Qt Code: 
  1. import QtQuick 2.4
  2. import QtQuick.Controls 1.3
  3. import QtQuick.Window 2.2
  4. import QtQuick.Dialogs 1.2
  5.  
  6. ApplicationWindow {
  7. //    title: qsTr("Hello World")
  8.     width: 800
  9.     height: 800
  10.     visible: true
  11.  
  12.  
  13.     ScrollView{
  14.         width:800
  15.         height: 800
  16.  
  17.         Flickable{
  18.             id:flick
  19.             contentHeight: canvas.height
  20.             contentWidth: canvas.width
  21.             transformOrigin: Item.TopLeft
  22.             Canvas {
  23.                 id:canvas
  24.                 width: 2000
  25.                 height: 2000
  26.                 anchors.right: parent.right; anchors.rightMargin: 0
  27.                 anchors.bottom: parent.bottom; anchors.bottomMargin: 0
  28.                 property int  offset: 0
  29.                 property int  draw_area_width: canvas.width-offset
  30.                 property int  draw_area_height: canvas.height-offset
  31.  
  32.  
  33.  
  34.                 function drawBackground(ctx) {
  35.                     ctx.save();
  36.                     ctx.fillStyle = "transparent";
  37.                     ctx.fillRect(0, 0, draw_area_width, draw_area_height);
  38.                     ctx.strokeStyle = "red";
  39.                     ctx.beginPath();
  40.  
  41.                     ctx.lineWidth = 1;
  42.  
  43.                     for (var i = 0; i < 100; i++) {
  44.                         ctx.moveTo(0, i * (draw_area_height/100.0));
  45.                         ctx.lineTo(draw_area_width, i * (draw_area_height/100.0));
  46.                     }
  47.  
  48.                     for (i = 0; i < 100; i++) {
  49.                         ctx.moveTo(i * (draw_area_width/100.0), 0);
  50.                         ctx.lineTo(i * (draw_area_width/100.0), draw_area_height);
  51.                     }
  52.  
  53.  
  54.                     ctx.stroke();
  55.  
  56.  
  57.                 }
  58.                 onPaint: {
  59.                     var ctx = getContext("2d");
  60.                     drawBackground(ctx)
  61.                 }
  62.  
  63.                 MouseArea{
  64.                     anchors.fill: parent
  65.                     onClicked: {
  66.                         canvas.width = canvas.width + 512
  67.                         canvas.height = canvas.height + 512
  68.                         canvas.requestPaint()
  69.                     }
  70.                 }
  71.             }
  72.         }
  73.     }
  74.  
  75. }
To copy to clipboard, switch view to plain text mode 

Please hepl me soluions. Thanks