HTML5 Canvas 指针事件教程

指针事件可以帮助我们用一个处理程序处理移动设备和桌面设备的事件。

要将指针事件处理程序绑定到 Konva 中的形状，我们可以使用 on() 方法。 on() 方法需要一个事件类型和在事件发生时要执行的函数。 Konva 支持 pointerdown、pointermove、pointerup、pointercancel、pointerover、pointerenter、pointerout、pointerleave、pointerclick、pointerdblclick 事件。

注意：此示例在移动设备和桌面设备上均可工作。

说明：移动你的鼠标/手指穿过三角形以查看指针坐标。

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: stage.width() / 2,
  y: stage.height() / 2,
  sides: 3,
  radius: 80,
  fill: '#00D2FF',
  stroke: 'black',
  strokeWidth: 4,
});

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

triangle.on('pointermove', function () {
  const pos = stage.getPointerPosition();
  writeMessage('x: ' + pos.x + ', y: ' + pos.y);
});

triangle.on('pointerout', function () {
  writeMessage('');
});

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

React

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

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

  const handlePointerMove = () => {
    const pos = stageRef.current.getPointerPosition();
    setMessage(`x: ${pos.x}, y: ${pos.y}`);
  };

  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={window.innerWidth / 2}
          y={window.innerHeight / 2}
          sides={3}
          radius={80}
          fill="#00D2FF"
          stroke="black"
          strokeWidth={4}
          onPointermove={handlePointerMove}
          onPointerout={() => setMessage('')}
        />
      </Layer>
    </Stage>
  );
};

export default App;

Vue

<template>
  <v-stage :config="stageSize" ref="stageRef">
    <v-layer>
      <v-text :config="textConfig" />
      <v-regular-polygon
        :config="triangleConfig"
        @pointermove="handlePointerMove"
        @pointerout="handlePointerOut"
      />
    </v-layer>
  </v-stage>
</template>

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

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

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 triangleConfig = {
  x: window.innerWidth / 2,
  y: window.innerHeight / 2,
  sides: 3,
  radius: 80,
  fill: '#00D2FF',
  stroke: 'black',
  strokeWidth: 4
};

const handlePointerMove = () => {
  const pos = stageRef.value.getNode().getPointerPosition();
  message.value = `x: ${pos.x}, y: ${pos.y}`;
};

const handlePointerOut = () => {
  message.value = '';
};
</script>