How to use DirecX or OpenGL to drawing in QML?

[tanthinh1510]

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

https://www.youtube.com/watch?v=gUxwKitta-k&feature=youtu.be

I try use Canvas in QML but it draw very slow. So I want to use DirecX or OpenGL to it

import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Window 2.2
import QtQuick.Dialogs 1.2

ApplicationWindow {
// title: qsTr("Hello World")
width: 800
height: 800
visible: true


ScrollView{
width:800
height: 800

Flickable{
id:flick
contentHeight: canvas.height
contentWidth: canvas.width
transformOrigin: Item.TopLeft
Canvas {
id:canvas
width: 2000
height: 2000
anchors.right: parent.right; anchors.rightMargin: 0
anchors.bottom: parent.bottom; anchors.bottomMargin: 0
property int offset: 0
property int draw_area_width: canvas.width-offset
property int draw_area_height: canvas.height-offset



function drawBackground(ctx) {
ctx.save();
ctx.fillStyle = "transparent";
ctx.fillRect(0, 0, draw_area_width, draw_area_height);
ctx.strokeStyle = "red";
ctx.beginPath();

ctx.lineWidth = 1;

for (var i = 0; i < 100; i++) {
ctx.moveTo(0, i * (draw_area_height/100.0));
ctx.lineTo(draw_area_width, i * (draw_area_height/100.0));
}

for (i = 0; i < 100; i++) {
ctx.moveTo(i * (draw_area_width/100.0), 0);
ctx.lineTo(i * (draw_area_width/100.0), draw_area_height);
}


ctx.stroke();


}
onPaint: {
var ctx = getContext("2d");
drawBackground(ctx)
}

MouseArea{
anchors.fill: parent
onClicked: {
canvas.width = canvas.width + 512
canvas.height = canvas.height + 512
canvas.requestPaint()
}
}
}
}
}

}


Please hepl me soluions. Thanks