QML画布性能问题

我想知道如何加速QML场景的绘制，该场景显示由六边形瓷砖组成的游戏地图。每个磁贴都是启动时通过JavaScript动态实例化的qml项。每个平铺的“高光”属性将根据鼠标在上面的移动进行切换

平铺对象看起来与此类似：

Item {
    id: tile

    x: // is set to fixed value by JS code on item instantiation
    y: // is set to fixed value by JS code on item instantiation
    width: // is set to fixed value by JS code on item instantiation
    height: // is set to fixed value by JS code on item instantiation

    property bool highlight: false

    Canvas {
        id: background
        anchors.fill: parent
        onPaint: {
            // draw filled hexagon
        }
    }
    Canvas {
        id: border
        anchors.fill: parent
        onPaint: {
            // draw hexagon outline
        }
    }
    Canvas {
        id: highlightItem
        anchors.fill: parent
        visible: highlight
        onPaint: {
            // draw filled yellow hexagon
        }
    }
}

问题是，切换单个瓷砖高光时，这种类型的场景渲染速度非常慢，场景中总共约300个瓷砖时，渲染速度约为11fps

如果删除背景和边框画布元素，则帧速率将增加三倍以上。我已经确认，在初始绘制操作完成后，不会再次调用onPaint（）方法

下面是单个突出显示事件的QML探查器视图，以及信号处理程序处理该事件所需的时间。细线是切换高光属性的位置

有人知道为什么这样一个简单的场景如此缓慢，以及如何加速吗

---

我猜字节码块是Canvas.onPaint代码，这在实时渲染瓶颈方面通常是可疑的

这实际上取决于什么触发Canvas.onPaint。这不会隐式发生，某些代码必须显式调用Canvas.requestPaint（）。检查您的代码，如果是这样的话。也许这是没有必要的

---

如果某些元素必须在每一帧重新绘制，我建议使用。您必须以片段和顶点着色器的形式编写渲染代码，这与canvas API非常不同。但它通常要快几个数量级。

我很早就检查过了。创建平铺后，对每个

onPaint（）

方法只有一个调用。当切换highlight visibility（高亮显示可见性）时，任何画布项上都没有进一步的

onPaint（）

调用，至少没有一个调用执行我放置在其中进行调试的

console.log（'paint'）

调用。