4

私は現在、一種のマップを表示するアプリケーションに取り組んでいます。マップ上でいくつかのアクションを実行できます。マップは非常に大きくなる可能性があるため、ユーザーはマップ全体を追跡するために小さなマップ (ミニマップ) を必要とします。

現在、2 つの段階があります。1 つはビッグ マップ用、もう 1 つはミニマップ用です。大きな地図にはいくつかのレイヤーが含まれていますが、ミニマップに表示する必要があるのはそのうちの 1 つだけです (レイアウトのようなものです)。

そこで、特定のレイヤーの 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 に詳しくないので、これが正しいアプローチかどうかはよくわかりません。

前もって感謝します ：-）

4

1 に答える 1

0

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>

例

于 2014-08-03T08:57:06.010 に答える