通过KineticJS使用SVG路径资源实现世界地图的效果

本次演示提供了一个通过KineticJS空国家使用个SVG路径资源实现一个世界地图指示的小案例。当你的鼠标悬浮在某个国家的时候，演示会自动标示出来。

HTML CODE

<script><br> var stage = new Kinetic.Stage({<br> container: 'container',<br> width: 578,<br> height: 260<br> });<br> var mapLayer = new Kinetic.Layer({<br> y: 20,<br> scale: 0.6<br> });<br><br> /*<br> * loop through country data stroed in the worldMap<br> * variable defined in the worldMap.js asset<br> */<br> for(var key in worldMap.shapes) {<br> var path = new Kinetic.Path({<br> data: worldMap.shapes[key],<br> fill: '#eee',<br> stroke: '#555',<br> strokeWidth: 1<br> });<br><br> path.on('mouseover', function() {<br> this.setFill('red');<br> mapLayer.drawScene();<br> });<br><br> path.on('mouseout', function() {<br> this.setFill('#eee');<br> mapLayer.drawScene();<br> });<br><br> mapLayer.add(path);<br> }<br><br> stage.add(mapLayer);<br><br> </script>

演示：http://www.html5canvastutorials.com/demos/labs/html5-canvas-world-map-svg-path-with-kineticjs/index.php