自定义事件监听范围

获取Konva最新的信息

我们可以使用 hitFunc 和 hitStrokeWidth 改变事件响应区域

1. 什么是 hitFunc?

我们可以通过设置 hitFunc 属性来创建一个定义事件响应区域函数。Konva 通过这个函数绘制一个区域用于监听事件被响应。使用自定义的函数的好处有很多，比方说：扩大一个图形交互的响应区域、让一个图形的局部相应事件而其它部分不能、或者运用简单的函数提高渲染性能。

查看自定义 sceneFunc 的最佳实践 同样也适用于 hitFunc。

hitFunc 包含两个入参：Konva.Context 和 图形的实例。

通过 hitFunc 你可以完全掌控响应区域的绘制。

2. 什么是 hitStrokeWidth?

对于某些图形，像 Konva.Line 重写它的 hitFunc 会比较困难。某些情况下你仅仅知识像让事件响应的区域更粗一点。
这种情况更适合使用 hitStrokeWidth。

说明：尝试鼠标 mouseover, mouseout, mousedown, 和 mouseup 图形，观察响应区域已经超过了图形范围；

Also you can toggle hit canvas too see how it looks. It may be useful for debugging.

Konva Custom_Hit_Region Demoview raw
<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/[email protected]/konva.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva Custom Hit Function Demo</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #f0f0f0;
      }
      button {
        position: absolute;
        top: 5px;
        left: 5px;
        z-index: 2;
      }
    </style>
  </head>

  <body>
    <button id="toggle">Toggle hit canvas</button>
    <div id="container"></div>
    <script>
      function writeMessage(message) {
        text.text(message);
        layer.draw();
      }

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

      var layer = new Konva.Layer();
      stage.add(layer);

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

      var star = new Konva.Star({
        x: stage.width() / 2,
        y: stage.height() / 2,
        numPoints: 7,
        innerRadius: 50,
        outerRadius: 70,
        fill: 'red',
        stroke: 'black',
        strokeWidth: 4,
        hitFunc: function(context) {
          context.beginPath();
          context.arc(0, 0, this.outerRadius() + 10, 0, Math.PI * 2, true);
          context.closePath();
          context.fillStrokeShape(this);
        }
      });
      layer.add(star);

      var line = new Konva.Line({
        x: 50,
        y: 100,
        points: [0, 0, 50, 0, 50, 100, 0, 100],
        tension: 1,
        strokeWidth: 1,
        hitStrokeWidth: 20,
        stroke: 'black'
      });
      layer.add(line);

      layer.draw();

      star.on('mouseover', function() {
        writeMessage('Mouseover star');
      });
      star.on('mouseout', function() {
        writeMessage('Mouseout star');
      });
      star.on('mousedown', function() {
        writeMessage('Mousedown star');
      });
      star.on('mouseup', function() {
        writeMessage('Mouseup star');
      });

      line.on('mouseover', function() {
        writeMessage('Mouseover line');
      });
      line.on('mouseout', function() {
        writeMessage('Mouseout line');
      });
      line.on('mousedown', function() {
        writeMessage('Mousedown line');
      });
      line.on('mouseup', function() {
        writeMessage('Mouseup line');
      });

      document.getElementById('toggle').addEventListener('click', function() {
        layer.toggleHitCanvas();
      });
    </script>
  </body>
</html>