首頁 > web前端 > H5教程 > 通过KineticJS使用SVG路径资源实现世界地图的效果

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

WBOY
發布: 2016-05-17 09:08:31
原創
1690 人瀏覽過

本次演示提供了一个通过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

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板