使用QML滚动网格背景

Question

我正在尝试制作一种具有滚动到无穷大背景的游戏。 为了使其正常工作，我使用了一个Rectangle和一个图层。该层用于背景的颜色。该层用于在矩形顶部绘制线条。 我添加了一种偏移量来更改背景的位置，但是没有任何效果...

import QtQuick 2.0

Item {
    id: root;
    property color colorBackground: Qt.rgba(0.9, 0.9, 0.9, 1.0);
    property color colorStroke: Qt.rgba(0.1, 0.1, 0.1, 1.0);
    property real mapPosition: 0.0;
    layer.enabled: true;

    layer.effect: ShaderEffect {
        property color colorStroke: root.colorStroke;
        property real widthRectangle: rectangle.width;
        property real heightRectangle: rectangle.height;
        property real cellSize: rectangle.width / 5;
        property real mapPosition: root.mapPosition;

        fragmentShader: "
            uniform lowp sampler2D source; // this item
            uniform highp vec4 colorStroke;
            uniform highp float widthRectangle;
            uniform highp float heightRectangle;
            uniform highp float cellSize;
            uniform highp float mapPosition;
            varying highp vec2 qt_TexCoord0;
            void main() {
                lowp vec4 p = texture2D(source, qt_TexCoord0);
                gl_FragColor = p;

                float x = qt_TexCoord0.x * widthRectangle;
                float y = qt_TexCoord0.y * heightRectangle + mapPosition;

                if(mod(x, cellSize) <= 1.0)
                    gl_FragColor = colorStroke;

                if(mod(y, cellSize) <= 1.0)
                    gl_FragColor = colorStroke;
            }";
    }

    Rectangle {
        id: rectangle;
        color: root.colorBackground;
        anchors.fill: parent;
    }
}

要更改我正在使用的位置：

import "GameLogic.js" as GameLogic
Background {
    anchors.fill: parent;
    mapPosition: GameLogic.mapPosition;
}

但是似乎背景根本不动... 有什么想法吗？