通过KineticJS使用SVG路径资源实现世界地图的效果
本次演示提供了一个通过KineticJS空国家使用个SVG路径资源实现一个世界地图指示的小案例。当你的鼠标悬浮在某个国家的时候,演示会自动标示出来。
HTML CODE
演示:http://www.html5canvastutorials.com/demos/labs/html5-canvas-world-map-svg-path-with-kineticjs/index.php
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>
<div id="container"></div>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.0.5.js"></script>
<script src="http://www.html5canvastutorials.com/demos/assets/worldMap.js"></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
【通过KineticJS使用SVG路径资源实现世界地图的效果】相关文章
1. 通过KineticJS使用SVG路径资源实现世界地图的效果
4. 3D视觉盛宴:Cube 基于google地图的HTML5云游戏
8. 开发者应该关注的五项Web新兴技术:WebGL和SVG名列其中
9. 现代 Web 开发必备的 JavaScript SVG 库
本文来源:https://www.51html5.com/a678.html
﹝通过KineticJS使用SVG路径资源实现世界地图的效果﹞相关内容
- 破解Siri协议,让你在Android设备或iPad上真正使用Siri
- iOS 8开放应用使用Safari JavaScript引擎
- 微游戏助力CJ SNS/HTML5创意产品征集启动
- Lazy Line Painter – 很有趣的 jQuery 路径动画插件
- Lazy Line Painter – 很有趣的 jQuery 路径动画插件
- HTML5每日一练之Canvas标签的应用-坐标变换与路径结合使用
- PathFinding.js 综合性的路径查找库
- PathFinding.js – 综合性的 JavaScript 路径查找库
- 谷歌开源小工具Tailbone,使用JS读写App Engine数据
- iPhone 4S通过入网检测为联通版销售扫除障碍