Interactive Building Map

获取Konva最新的信息

Instructions: hover over sections of the building to see its description

Konva Interactive Building Map Demoview raw
<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/[email protected]/konva.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva Interactive Building Map Demo</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #f0f0f0;
      }
      #container {
        background: black url('/assets/line-building.png') no-repeat 1px 0px;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script>
      var width = window.innerWidth;
      var height = window.innerHeight;

      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().text(text);
        tooltip.position({
          x: x,
          y: y
        });
        tooltip.show();
      }
      var stage = new Konva.Stage({
        container: 'container',
        width: width,
        height: height
      });
      var shapesLayer = new Konva.Layer();
      var tooltipLayer = new Konva.Layer();

      var tooltip = new Konva.Label({
        opacity: 0.75,
        visible: false,
        listening: false
      });

      tooltip.add(
        new Konva.Tag({
          fill: 'black',
          pointerDirection: 'down',
          pointerWidth: 10,
          pointerHeight: 10,
          lineJoin: 'round',
          shadowColor: 'black',
          shadowBlur: 10,
          shadowOffsetX: 10,
          shadowOffsetY: 10,
          shadowOpacity: 0.5
        })
      );

      tooltip.add(
        new Konva.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 Konva.Line({
          points: points,
          fill: area.color,
          opacity: 0,
          closed: true,
          // custom attr
          key: key
        });

        shapesLayer.add(shape);
      }

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

      stage.on('mouseover', function(evt) {
        var shape = evt.target;
        if (shape) {
          shape.opacity(0.5);
          shapesLayer.draw();
        }
      });
      stage.on('mouseout', function(evt) {
        var shape = evt.target;
        if (shape) {
          shape.opacity(0);
          shapesLayer.draw();
          tooltip.hide();
          tooltipLayer.draw();
        }
      });
      stage.on('mousemove', function(evt) {
        var shape = evt.target;
        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>
Next