HTML5 Canvas 使用 Konva 监听或不监听事件

要使用 Konva 监听或不监听事件，我们可以在实例化形状时将配置对象的 listening 属性设置为 true 或 false，或者可以使用 setListening() 方法设置 listening 属性。一旦我们为一个或多个节点设置了 listening 属性，我们还需要使用 drawHit() 方法重新绘制每个受影响的层的命中图形。

说明：将鼠标悬停在椭圆上以观察事件处理程序未被执行。点击“监听”以开始监听事件，并观察事件处理程序现在被执行。

Vanilla

import Konva from 'konva';

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

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

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

const oval = new Konva.Ellipse({
  x: stage.width() / 2,
  y: stage.height() / 2,
  radiusX: 100,
  radiusY: 50,
  fill: 'yellow',
  stroke: 'black',
  strokeWidth: 4,
  listening: false,
});

oval.on('mouseover', function () {
  writeMessage('鼠标悬停在椭圆上');
});
oval.on('mouseout', function () {
  writeMessage('');
});

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

layer.add(oval);

// 添加切换监听的按钮
const button = document.createElement('button');
button.innerHTML = '监听';
document.body.appendChild(button);
button.addEventListener('click', () => {
  const listening = !oval.listening();
  oval.listening(listening);
  button.innerHTML = listening ? '停止监听' : '监听';
  layer.drawHit();
});

React

import { Stage, Layer, Ellipse, Text } from 'react-konva';
import { useState } from 'react';

const App = () => {
  const [message, setMessage] = useState('');
  const [listening, setListening] = useState(false);

  return (
    <>
      <button onClick={() => setListening(!listening)}>
        {listening ? '停止监听' : '监听'}
      </button>
      <Stage width={window.innerWidth} height={window.innerHeight}>
        <Layer>
          <Text
            x={10}
            y={10}
            fontFamily="Calibri"
            fontSize={24}
            text={message}
            fill="black"
          />
          <Ellipse
            x={window.innerWidth / 2}
            y={window.innerHeight / 2}
            radiusX={100}
            radiusY={50}
            fill="yellow"
            stroke="black"
            strokeWidth={4}
            listening={listening}
            onMouseover={() => setMessage('鼠标悬停在椭圆上')}
            onMouseout={() => setMessage('')}
          />
        </Layer>
      </Stage>
    </>
  );
};

export default App;

Vue

<template>
  <div>
    <button @click="toggleListening">
      {{ listening ? '停止监听' : '监听' }}
    </button>
    <v-stage :config="stageSize">
      <v-layer>
        <v-text :config="textConfig" />
        <v-ellipse
          :config="ovalConfig"
          @mouseover="handleMouseover"
          @mouseout="handleMouseout"
        />
      </v-layer>
    </v-stage>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

const message = ref('');
const listening = ref(false);

const stageSize = {
  width: window.innerWidth,
  height: window.innerHeight
};

const textConfig = computed(() => ({
  x: 10,
  y: 10,
  fontFamily: 'Calibri',
  fontSize: 24,
  text: message.value,
  fill: 'black'
}));

const ovalConfig = computed(() => ({
  x: window.innerWidth / 2,
  y: window.innerHeight / 2,
  radiusX: 100,
  radiusY: 50,
  fill: 'yellow',
  stroke: 'black',
  strokeWidth: 4,
  listening: listening.value
}));

const handleMouseover = () => {
  message.value = '鼠标悬停在椭圆上';
};

const handleMouseout = () => {
  message.value = '';
};

const toggleListening = () => {
  listening.value = !listening.value;
};
</script>