如何实现 KineticJS 层的 Minimap？答案

【问题标题】：How to implement Minimap of KineticJS Layer?如何实现 KineticJS 层的 Minimap？
【发布时间】：2013-03-12 14:28:59
【问题描述】：

我目前正在开发一个显示某种地图的应用程序。您可以在地图上执行多项操作。地图可以变得非常大，因此用户需要更小的地图（Minimap）来跟踪整个地图。

目前有两个阶段。一张是大地图，一张是小地图。大地图包含多个图层，但只需要在小地图上显示其中一个（类似于布局）。

所以我想为特定图层的AfterDrawing添加一个EventListener。

this.layoutLayer.afterDraw(this._initMinimap);

在事件侦听器中，我正在执行以下操作：

//...
_initMinimap : function(event) {
    var ctrl = event;
    if (!this.minimap) {
        this.minimap = new Kinetic.Stage({
            container : 'container',
            width : 165,
            height : 165
        });
    }
    if (!this.mapLayer) {
        this.mapLayer = new Kinetic.Layer({});
    }
    this.mapLayer.clear();
    this.minimap.clear();
    this.layoutLayer.toImage({
        callback : function(img) {
            var image = new Kinetic.Image({
                image : img
            });
            image.setScale(0.01,0.01);
            ctrl.mapLayer.add(image);
        }
    });
    this.minimap.add(this.mapLayer);
    this.minimap.draw();
},
//...

有没有人知道如何解决这个问题？我对 JavaScript 还不是很熟悉，所以我不太确定这是否是正确的方法。

提前致谢:-)

【问题讨论】：

虽然您解释了您想要实现的目标，但您并没有彻底解释您遇到的问题。您刚刚发布了一些代码，这些代码创建了一个新阶段、一个新层，从 layoutLayout 层制作了一个图像，然后将该图像添加到该层，并绘制了该阶段。你能描述一下这个问题吗？
一种更简单的方法是只绘制所有迷你地图图层，然后立即将它们全部隐藏。然后当你的事件触发时，显示你想要的层。
哦，你说得对@EliteOctagon。好的，我只是查看我的代码并得到另一个想法。是不是可以只将较小比例的 layoutLayer 分配给另一个阶段？我试图将 layoutLayer 的引用复制到另一个变量，将其缩小并将其添加到另一个阶段。但正如我所说，我只是复制参考而不是“克隆”图层。
现在的问题是我在两个阶段都没有图层。当添加到另一个阶段时，它会在一个阶段自动删除。
好吧，你可以克隆它... stage2.add(layer1.clone());

标签： javascript layer kineticjs stage

【解决方案1】：

您可以使用clone 和scale 获得图层的微型副本：

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>Minimap Test</title>
    </head>
    <body>
        <div id="container"></div>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/kineticjs/5.0.6/kinetic.min.js"></script>
        <script>
            var squareQuantity = 10,
                tileWidth = window.innerWidth / squareQuantity,
                tileHeight = window.innerHeight / squareQuantity,
                background = new Kinetic.Layer,
                stage = new Kinetic.Stage({
                    width: window.innerWidth,
                    height: window.innerHeight,
                    container: 'container'
                });

            for ( var x = 0; x < squareQuantity; x++ ){
                for ( var y = 0; y < squareQuantity; y++ ){
                    background.add(
                        new Kinetic.Rect({
                            x: x * tileWidth,
                            y: y * tileHeight,
                            width: tileWidth,
                            height: tileHeight,
                            fill: '#' + Math.random().toString( 16 ).substring( 2, 8 )
                        })
                    )
                }
            }

            var mini = background.clone().scale({ x: 0.2, y: 0.2 });

            stage.add( background );
            stage.add( mini );

            background.draw();
        </script>
    </body>
</html>

Example

【讨论】：