performance - Kinetic-js : How to cache a complete layer as an image

Question

我有一个问题，希望找到解决方案。

我正在使用 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

在 fiddle 中，您可以通过更改一个参数来运行两个版本。希望这有帮助......

感谢您的帮助。

最诚挚的问候 托尔斯滕

Answer 1

实际上，问题比您想象的要简单 - 将图层缓存到图像中后，您尝试将图像对象直接添加到舞台上(您不能这样做)。

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

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

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