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

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

HTML CODE

<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#tango {
position: absolute;
top: 10px;
left: 10px;
padding: 10px;
}
#container {
background-image: url('http://www.html5canvastutorials.com/demos/assets/map-background.png');
display: inline-block;
overflow: hidden;
height: 262px;
width: 580px;
background-position: 1px 1px;
}
</style>
</head>
<body>
<p id="container"></p>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.0.5.js?4.1.8"></script>
<script src="http://www.html5canvastutorials.com/demos/assets/worldMap.js?4.1.8"></script>
<script>
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 260
});
var mapLayer = new Kinetic.Layer({
y: 20,
scale: 0.6
});

/*
* loop through country data stroed in the worldMap
* variable defined in the worldMap.js asset
*/
for(var key in worldMap.shapes) {
var path = new Kinetic.Path({
data: worldMap.shapes[key],
fill: '#eee',
stroke: '#555',
strokeWidth: 1
});

path.on('mouseover', function() {
this.setFill('red');
mapLayer.drawScene();
});

path.on('mouseout', function() {
this.setFill('#eee');
mapLayer.drawScene();
});

mapLayer.add(path);
}

stage.add(mapLayer);

</script>
</body>
</html>

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