QML canvas性能问题

Question

我想弄清楚如何加速绘制QML场景，该场景显示由六边形瓷砖组成的游戏地图。每个磁贴都是一个qml项，在启动时通过JavaScript动态实例化。每个图块的高亮属性都是基于鼠标移动来切换的。

tile对象看起来与此类似：

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个图块处于约300个图块。

如果我删除背景和边框画布元素，我的帧速率将超过三倍。我已经确认在初始绘制操作完成后没有再次调用onPaint（）方法。

下面是单个高亮事件的QML分析器视图以及信号处理程序处理所需的时间。细线是切换高亮属性的地方。

有没有人知道为什么这么简单的场景如此缓慢以及如何加速？

Answer 1

我猜字节码块是Canvas.onPaint代码，当涉及到实时渲染瓶颈时，这通常是可疑的。

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

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