Geek Answers Handbook

How to implement Minimap KineticJS Layer?

I am currently working on an application that displays an amap view. You can do several actions on the map. A map can become very large, so the user needs a smaller map (Minimap) to track the entire map.

There are currently two phases. One for the big card, one for the mini-card. A large map contains several layers, but only one of them should be displayed on the minimap (its as a layout).

So I thought about adding EventListener for AfterDrawing a certain level.

this.layoutLayer.afterDraw(this._initMinimap);

In the Event Listener, I do the following:

 //... _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(); }, //...

Does anyone have an idea on how to solve this problem? I am not familiar with JavaScript yet, so I'm not quite sure if this is the right approach.

Thank you in advance: -)

+4
source share
1 answer

You can get a miniature copy of the layer with clone and 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

0
source

More articles:


All Articles