HTML5 Canvas 移动端触控事件教程

要在移动设备上使用 Konva 绑定形状的事件处理程序，可以使用 on() 方法。 on() 方法需要事件类型和在事件发生时执行的函数。 Konva 支持 touchstart、touchmove、touchend、tap、dbltap、dragstart、dragmove 和 dragend 等移动端事件。

对于更复杂的手势，例如旋转，可以查看 Gestures Demo。

如果你需要整体舞台的平移和缩放逻辑，可以参考 Multi-touch scale Stage demo。

注意：此示例仅在移动设备上有效，因为它使用的是触控事件而非鼠标事件。

操作说明：用手指在三角形上移动，观察触控坐标以及触摸开始和结束时的圆形状态。

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('touchmove', function () {
  const touchPos = stage.getPointerPosition();
  const x = touchPos.x;
  const y = touchPos.y;
  writeMessage('x: ' + x + ', y: ' + y);
});

circle.on('touchstart', function () {
  writeMessage('touchstart circle');
});
circle.on('touchend', function () {
  writeMessage('touchend 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 { useState, useRef } from 'react';

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

  const handleTriangleTouch = () => {
    const touchPos = stageRef.current.getPointerPosition();
    setMessage(`x: ${touchPos.x}, y: ${touchPos.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={80}
          y={120}
          sides={3}
          radius={80}
          fill="#00D2FF"
          stroke="black"
          strokeWidth={4}
          onTouchmove={handleTriangleTouch}
        />
        <Circle
          x={230}
          y={100}
          radius={60}
          fill="red"
          stroke="black"
          strokeWidth={4}
          onTouchstart={() => setMessage('touchstart circle')}
          onTouchend={() => setMessage('touchend 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"
        @touchmove="handleTriangleTouch"
      />
      <v-circle
        :config="circleConfig"
        @touchstart="handleTouchStart"
        @touchend="handleTouchEnd"
      />
    </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: 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 handleTriangleTouch = () => {
  const touchPos = stageRef.value.getNode().getPointerPosition();
  message.value = `x: ${touchPos.x}, y: ${touchPos.y}`;
};

const handleTouchStart = () => {
  message.value = 'touchstart circle';
};

const handleTouchEnd = () => {
  message.value = 'touchend circle';
};
</script>

Open Sandbox