How to use QtQuick tiled canvas?

489 Views Asked by At

I found a document here but it's too ambiguous to understand. Who can give me some example of using tiled Canvas?

UPDATE
Now tiled Canvas is marked obsoleted. We should NOT use it any more.

1

There are 1 best solutions below

0
On BEST ANSWER

Thanks to Mitch comment we know that tiled Canvas does not always work properly (see here).

The bug still appears in Qt 5.4.2 as shown by this example:

import QtQuick 2.0

Rectangle {
    width: 400
    height: 400
    Flickable {
        id: flick
        anchors.fill: parent
        contentWidth: 400
        contentHeight: 40000
    }
    Canvas {
        parent: flick
        anchors.fill: parent
        contextType: "2d"
        canvasSize: Qt.size(flick.contentWidth, flick.contentHeight)
        canvasWindow: Qt.rect(flick.contentX, flick.contentY,
                              flick.width, flick.height)
        tileSize: Qt.size(20, 20)
        renderStrategy: Canvas.Cooperative
        onPaint: {
            for (var y = region.y; y < region.y + region.height;
                 y += tileSize.height) {
                for (var x = region.x; x < region.x + region.width;
                     x += tileSize.width) {
                    context.fillStyle = "black";
                    context.fillRect(x, y, tileSize.width, tileSize.height);
                    context.fillStyle = "green";
                    context.fillRect(x + 1, y + 1, tileSize.width - 2,
                                     tileSize.height - 2);
                }
            }
        }
        onCanvasWindowChanged: requestPaint()
    }
}