HTML5 Canvas 形状事件

要使用 Konva 检测形状事件，我们可以使用 on() 方法将事件处理程序绑定到节点。

on() 方法需要一个事件类型和一个当事件发生时执行的函数。

鼠标事件：mouseover, mouseout, mouseenter, mouseleave, mousemove, mousedown, mouseup, wheel, click, dblclick。

触摸事件：touchstart, touchmove, touchend, tap, dbltap。

指针事件：pointerdown, pointermove, pointereup, pointercancel, pointerover, pointerenter, pointerout,pointerleave, pointerclick, pointerdblclick。

拖拽事件：dragstart, dragmove, 和 dragend。

变换事件：transformstart, transform, transformend。

说明：三角形的 mouseover 和 mouseout，以及圆形的 mouseover、mouseout、mousedown 和 mouseup。

Vanilla

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

const layer = new Konva.Layer();

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

const triangle = new Konva.RegularPolygon({
x: 80,
y: 120,
sides: 3,
radius: 80,
fill: '#00D2FF',
stroke: 'black',
strokeWidth: 4,
});

const circle = new Konva.Circle({
x: 230,
y: 100,
radius: 60,
fill: 'red',
stroke: 'black',
strokeWidth: 4,
});

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

triangle.on('mouseout', () => {
writeMessage('Mouseout triangle');
});

triangle.on('mousemove', () => {
const mousePos = stage.getPointerPosition();
writeMessage('x: ' + mousePos.x + ', y: ' + mousePos.y);
});

circle.on('mouseover', () => {
writeMessage('Mouseover circle');
});
circle.on('mouseout', () => {
writeMessage('Mouseout circle');
});
circle.on('mousedown', () => {
writeMessage('Mousedown circle');
});
circle.on('mouseup', () => {
writeMessage('Mouseup circle');
});

layer.add(triangle);
layer.add(circle);
layer.add(text);
stage.add(layer);

Open Sandbox

React

import { Stage, Layer, RegularPolygon, Circle, Text } from 'react-konva';
import { useRef, useState } from 'react';

const App = () => {
  const [message, setMessage] = useState('');
  const stageRef = useRef();

  const writeMessage = (text) => {
    setMessage(text);
  };

  return (
    <Stage width={window.innerWidth} height={window.innerHeight} ref={stageRef}>
      <Layer>
        <Text
          x={10}
          y={10}
          fontFamily="Calibri"
          fontSize={24}
          text={message}
          fill="black"
        />
        <RegularPolygon
          x={80}
          y={120}
          sides={3}
          radius={80}
          fill="#00D2FF"
          stroke="black"
          strokeWidth={4}
          onMouseout={() => writeMessage('Mouseout triangle')}
          onMousemove={() => {
            const mousePos = stageRef.current.getPointerPosition();
            writeMessage('x: ' + mousePos.x + ', y: ' + mousePos.y);
          }}
        />
        <Circle
          x={230}
          y={100}
          radius={60}
          fill="red"
          stroke="black"
          strokeWidth={4}
          onMouseover={() => writeMessage('Mouseover circle')}
          onMouseout={() => writeMessage('Mouseout circle')}
          onMousedown={() => writeMessage('Mousedown circle')}
          onMouseup={() => writeMessage('Mouseup circle')}
        />
      </Layer>
    </Stage>
  );
};

export default App;

Open Sandbox

Vue

<template>
  <v-stage :config="stageSize" ref="stageRef">
    <v-layer>
      <v-text :config="textConfig" />
      <v-regular-polygon
        :config="triangleConfig"
        @mouseout="writeMessage('Mouseout triangle')"
        @mousemove="handleTriangleMouseMove"
      />
      <v-circle
        :config="circleConfig"
        @mouseover="writeMessage('Mouseover circle')"
        @mouseout="writeMessage('Mouseout circle')"
        @mousedown="writeMessage('Mousedown circle')"
        @mouseup="writeMessage('Mouseup circle')"
      />
    </v-layer>
  </v-stage>
</template>

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

const stageRef = ref(null);
const message = ref('');

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

const textConfig = {
  x: 10,
  y: 10,
  fontFamily: 'Calibri',
  fontSize: 24,
  text: message,
  fill: 'black'
};

const triangleConfig = {
  x: 80,
  y: 120,
  sides: 3,
  radius: 80,
  fill: '#00D2FF',
  stroke: 'black',
  strokeWidth: 4
};

const circleConfig = {
  x: 230,
  y: 100,
  radius: 60,
  fill: 'red',
  stroke: 'black',
  strokeWidth: 4
};

const writeMessage = (text) => {
  message.value = text;
};

const handleTriangleMouseMove = () => {
  const mousePos = stageRef.value.getNode().getPointerPosition();
  writeMessage('x: ' + mousePos.x + ', y: ' + mousePos.y);
};
</script>

Open Sandbox