HTML5教程

当前位置: HTML5技术网 > HTML5教程 > 通过KineticJS使用SVG路径资源实现世界地图的效果

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

本次演示提供了一个通过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>
<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路径资源实现世界地图的效果

2. SVG.js:基于JavaScript的SVG操作库

3. W3C首次发布SVG标记、SVG轮廓标准工作草案

4. 3D视觉盛宴:Cube 基于google地图的HTML5云游戏

5. 绘制SVG内容到Canvas的HTML5应用

6. 7种炫酷HTML5 SVG液态水滴融合动画特效

7. Chrome18引入GPU加速 支持SVG与CSS

8. 开发者应该关注的五项Web新兴技术:WebGL和SVG名列其中

9. 现代 Web 开发必备的 JavaScript SVG 库

10. 基于 Snap SVG 框架的响应式饼图

本文来源:https://www.51html5.com/a678.html

点击展开全部

﹝通过KineticJS使用SVG路径资源实现世界地图的效果﹞相关内容

「通过KineticJS使用SVG路径资源实现世界地图的效果」相关专题

svg

其它栏目

也许您还喜欢