性能 – Kinetic-js：如何将完整的图层缓存为图像

我有一个问题,希望找到任何解决方案.

我正在使用Kinetic.js创建具有特殊外观的HMI解决方案.因此,我创建了一个为舞台创建3个图层的功能：带有网格的背景图层,带有静态形状的图层,用于HMI屏幕的基本布局,第三层用于所有交互元素(如按钮,有价值的显示等等)上…).现在我想缓存网格和静态层以提高性能,因为在整个HMI屏幕发生变化之前,这些层永远不会改变……

作为测试,我开始使用以下代码为网格层编写代码：

// Create a grid layer if showGrid is set to TRUE...
console.log('Start to create background grid if required');
if (this.actualPageConfig.showGrid) {
    var grid = new Kinetic.Layer();
    for (var x=1; x <= this.cols; x++) {
        var eLoc = LCARSElements.posToRealPos(x, 1, this.cols, this.rows);
        if (x <= this.actualPageConfig.columns) {
            grid.add(new Kinetic.Line({
                points: [eLoc.x, eLoc.y, eLoc.x, eLoc.height],
                stroke: "red",
                strokeWidth: 1,
                lineCap: "round",
                lineJoin: "round" 
            }));
        }
    }
    for (var y=1; y <= this.rows; y++) {
        var eLoc = LCARSElements.posToRealPos(1, y, this.cols, this.rows);
        if (y <= this.actualPageConfig.rows) {
            grid.add(new Kinetic.Line({
                points: [eLoc.x, eLoc.y, eLoc.width, eLoc.y],
                stroke: "red",
                strokeWidth: 1,
                lineCap: "round",
                lineJoin: "round"
            }));
        }
    }

    // Add grid layer to stage
    //this.stage.add(grid);  <-- to be replaced by cache image

    // Convert grid into an image and add this to the stage
    console.log('convert grid to image to increase performance');
    grid.toImage({
        width:      displayManager.stage.getWidth(),
        height:     displayManager.stage.getHeight(),
        callback:   function(img) {
            var cacheGrid = new Kinetic.Image({ 
                image:  img,
                x:      0,
                y:      0,
                width:  displayManager.stage.getWidth(),
                height: displayManager.stage.getHeight()
            });
            console.log('insert grid-image to stage');
            displayManager.stage.add(cacheGrid);
            console.log('redraw stage...');
            displayManager.stage.draw();
        }
    });
}

我的问题是,这不起作用.网格不再可见,控制台日志显示以下错误信息：

Type error: layer.canvas is undefined
layer.canvas.setSize(this.attrs.width, this.attrs.height);      kinetic.js (Zeile 3167)

正如我已经知道将执行代码“displayManger.stage.add(cacheGrid)时错误上升(displayManager是此代码剪切所在的外部类).
任何人都可以看到我犯了错误吗？当我直接添加图层网格时,一切正常……

我创建了一个jsfiddle来演示问题：jsfiddle

在小提琴中,您可以通过更改一个参数来运行两个版本.希望这可以帮助….

感谢帮助.

最好的祝福
  托尔斯滕

实际上,问题比你想象的要简单 – 在将图层缓存到图像中之后,你试图将图像对象直接添加到舞台上(你不能这样做).

要解决此问题,您需要创建一个新图层,例如cahcedLayer,将图像添加到cachedLayer,然后将cachedLayer添加到舞台.

查看KineticJS信息页面以了解有关节点嵌套的更多信息：

https://github.com/ericdrowell/KineticJS/wiki