qtcanvasqmlqt5.4

How to use QtQuick tiled canvas?


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.


Solution

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