Heim > Web-Frontend > H5-Tutorial > 通过KineticJS使用SVG路径资源实现世界地图的效果

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

WBOY
Freigeben: 2016-05-17 09:08:31
Original
1690 Leute haben es durchsucht

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

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage