图片事件

如果只需要检测图片非透明像素区域触发的事件，我们可以使用 drawHitFromCache() 方法生成一个精确的事件检测区域。默认情况下图片的任何像素都会促发事件，也包括透明的像素。drawHitFromCache() 方法可以传入一个回调函数，当检测区域被创建后会执行这个函数。

*注意：drawHitFromCache() 方法需要图片和当前执行的代码在同一个域下。

说明：鼠标滑过猴子和狮子图片，观察 mouseover 事件的绑定。你可以发现在猴子图片上，所有区域包括透明像素都触发了事件。而狮子图片我们创建了一个事件检测区域，忽略了透明像素，因此事件检测可以精确到非透明像素。

Konva Image_Events Demoview raw

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/[email protected]/konva.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva Image Events Demo</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #f0f0f0;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script>
      function writeMessage(message) {
        text.text(message);
        layer.draw();
      }
      function loadImages(sources, callback) {
        var images = {};
        var loadedImages = 0;
        var numImages = 0;
        for (var src in sources) {
          numImages++;
        }
        for (var src in sources) {
          images[src] = new Image();
          images[src].onload = function() {
            if (++loadedImages >= numImages) {
              callback(images);
            }
          };
          images[src].src = sources[src];
        }
      }
      function buildStage(images) {
        var monkey = new Konva.Image({
          image: images.monkey,
          x: 120,
          y: 50
        });

        var lion = new Konva.Image({
          image: images.lion,
          x: 280,
          y: 30
        });

        monkey.on('mouseover', function() {
          writeMessage('mouseover monkey');
        });

        monkey.on('mouseout', function() {
          writeMessage('');
        });

        lion.on('mouseover', function() {
          writeMessage('mouseover lion');
        });

        lion.on('mouseout', function() {
          writeMessage('');
        });

        lion.cache();
        lion.drawHitFromCache();

        layer.add(monkey);
        layer.add(lion);
        layer.add(text);
        stage.add(layer);
      }
      var stage = new Konva.Stage({
        container: 'container',
        width: 578,
        height: 200
      });

      var layer = new Konva.Layer();

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

      var sources = {
        lion: '/assets/lion.png',
        monkey: '/assets/monkey.png'
      };

      loadImages(sources, buildStage);
    </script>
  </body>
</html>