HTML5画布互动构建地图

最新推荐文章于 2024-06-12 09:43:12 发布

jzlblfys

最新推荐文章于 2024-06-12 09:43:12 发布

阅读量878

点赞数

分类专栏： HTML5画布互动构建地图文章标签： HTML5画布互动构建地图

本文链接：https://blog.csdn.net/jzlblfys/article/details/17380729

版权

HTML5画布互动构建地图专栏收录该内容

0 篇文章 0 订阅

订阅专栏

说明:悬停在部分建筑,看到它的描述

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #container {
        background-color: black;
        background-image: url("http://www.html5canvastutorials.com/demos/assets/line-building.png");
        background-position: 1px 0px;
        background-repeat: no-repeat;
        width: 580px;
        height: 327px;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.4.min.js"></script>
    <script defer="defer">
      function getData() {
        return {
          '1st Floor': {
            color: 'blue',
            points: [366, 298, 500, 284, 499, 204, 352, 183, 72, 228, 74, 274]
          },
          '2nd Floor': {
            color: 'red',
            points: [72, 228, 73, 193, 340, 96, 498, 154, 498, 191, 341, 171]
          },
          '3rd Floor': {
            color: 'yellow',
            points: [73, 192, 73, 160, 340, 23, 500, 109, 499, 139, 342, 93]
          },
          'Gym': {
            color: 'green',
            points: [498, 283, 503, 146, 560, 136, 576, 144, 576, 278, 500, 283]
          }
        }
      }
      function updateTooltip(tooltip, x, y, text) {
        tooltip.getText().setText(text);
        tooltip.setPosition(x, y);
        tooltip.show();
      }
      var stage = new Kinetic.Stage({
        container: 'container',
        width: 578,
        height: 325
      });
      var shapesLayer = new Kinetic.Layer();
      var tooltipLayer = new Kinetic.Layer();
      
      var tooltip = new Kinetic.Label({
        opacity: 0.75,
        visible: false,
        listening: false
      });
      
      tooltip.add(new Kinetic.Tag({
        fill: 'black',
        pointerDirection: 'down',
        pointerWidth: 10,
        pointerHeight: 10,
        lineJoin: 'round',
        shadowColor: 'black',
        shadowBlur: 10,
        shadowOffset: 10,
        shadowOpacity: 0.5
      }));
      
      tooltip.add(new Kinetic.Text({
        text: '',
        fontFamily: 'Calibri',
        fontSize: 18,
        padding: 5,
        fill: 'white'
      }));
      
      tooltipLayer.add(tooltip);

      // get areas data
      var areas = getData();

      // draw areas
      for(var key in areas) {

        var area = areas[key];
        var points = area.points;

        var shape = new Kinetic.Polygon({
          points: points,
          fill: area.color,
          opacity: 0,
          // custom attr
          key: key
        });

        shapesLayer.add(shape);

      }

      stage.add(shapesLayer);
      stage.add(tooltipLayer);

      stage.on('mouseover', function(evt) {
        var shape = evt.targetNode;
        if (shape) {
          shape.setOpacity(0.5);
          shapesLayer.draw();
        }
      });
      stage.on('mouseout', function(evt) {
        var shape = evt.targetNode;
        if (shape) {
          shape.setOpacity(0);
          shapesLayer.draw();
          tooltip.hide();
          tooltipLayer.draw();
        }
      });
      stage.on('mousemove', function(evt) {
        var shape = evt.targetNode;
        if (shape) {
          var mousePos = stage.getPointerPosition();
          var x = mousePos.x;
          var y = mousePos.y - 5;
          updateTooltip(tooltip, x, y, shape.attrs.key);
          tooltipLayer.batchDraw();
        }
      }); 
      
    </script>
  </body>
</html>

jzlblfys

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5画布互动构建地图

说明:悬停在部分建筑,看到它的描述 body { margin: 0px; padding: 0px; } #container { background-color: black; background-image: url("http://www.html5canv
复制链接

扫一扫