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);

Open Sandbox

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;

Open Sandbox

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>

Open Sandbox