Planets Image Map

获取Konva最新的信息

Instructions: Mouse over the planets to see their names and use the check box to show and hide the map overlay.

Konva Planets Image Mapview raw
<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/konva@4.0.18/konva.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva Planets Image Map Demo</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #f0f0f0;
      }
      #controls {
        position: absolute;

        left: 10px;
        top: 10px;
        z-index: 99999;
      }
      label {
        color: white;
        vertical-align: top;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <div id="controls">
      <input type="checkbox" id="checkbox" />
      <label> Show map overlay </label>
    </div>
    <script>
      var width = window.innerWidth;
      var height = window.innerHeight;

      function writeMessage(message) {
        text.text(message);
        messageLayer.draw();
      }

      var stage = new Konva.Stage({
        container: 'container',
        width: width,
        height: height
      });

      var layer = new Konva.Layer();

      var text = new Konva.Text({
        x: 10,
        y: 10,
        fontFamily: 'Calibri',
        fontSize: 24,
        text: '',
        fill: 'white'
      });

      var planetsLayer = new Konva.Layer();
      var circlesLayer = new Konva.Layer();
      var messageLayer = new Konva.Layer();

      var planets = {
        Mercury: {
          x: 46,
          y: 126,
          radius: 32
        },
        Venus: {
          x: 179,
          y: 126,
          radius: 79
        },
        Earth: {
          x: 366,
          y: 127,
          radius: 85
        },
        Mars: {
          x: 515,
          y: 127,
          radius: 45
        }
      };

      var imageObj = new Image();
      imageObj.onload = function() {
        // draw shape overlays
        for (var pubKey in planets) {
          (function() {
            var key = pubKey;
            var planet = planets[key];

            var planetOverlay = new Konva.Circle({
              x: planet.x,
              y: planet.y,
              radius: planet.radius
            });

            planetOverlay.on('mouseover', function() {
              writeMessage(key);
            });
            planetOverlay.on('mouseout', function() {
              writeMessage('');
            });

            circlesLayer.add(planetOverlay);
          })();
        }

        var checkbox = document.getElementById('checkbox');
        checkbox.addEventListener(
          'click',
          function() {
            var shapes = circlesLayer.getChildren();

            // flip show property
            for (var n = 0; n < shapes.length; n++) {
              var shape = shapes[n];
              var f = shape.fill();
              shape.fill(f == 'red' ? null : 'red');
            }

            circlesLayer.draw();
          },
          false
        );

        messageLayer.add(text);
        stage.add(planetsLayer);
        stage.add(circlesLayer);
        stage.add(messageLayer);

        // draw planets
        var planetsContext = planetsLayer.getContext();
        planetsContext.drawImage(imageObj, 0, 0);
      };
      imageObj.src = '/assets/planets.png';
    </script>
  </body>
</html>
Next