HTML5 Canvas 桌面和移动设备事件支持教程

注意：此演示可能已经过时，因为现代浏览器支持指针事件。您也可以在 Konva 中使用指针事件。请参阅 指针事件演示。但如果您不想使用指针事件，请继续阅读...

要为桌面和移动应用程序中的形状添加事件处理程序，我们可以使用 on() 方法并传入成对的事件。例如，为了在桌面和移动应用程序中触发 mousedown 事件，我们可以使用 "mousedown touchstart" 事件对来覆盖这两种媒介。为了在桌面和移动应用程序中触发 mouseup 事件，我们可以使用 "mouseup touchend" 事件对。我们还可以使用 "dblclick dbltap" 事件对来绑定在桌面和移动设备上都有效的双击事件。

操作说明：在桌面或移动设备上点击、松开鼠标或触摸圆圈以观察相同的功能。

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 circle = new Konva.Circle({
  x: stage.width() / 2,
  y: stage.height() / 2,
  radius: 70,
  fill: 'red',
  stroke: 'black',
  strokeWidth: 4,
});

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

// 桌面和移动事件
circle.on('mousedown touchstart', function () {
  writeMessage('按下或触摸开始');
});

circle.on('mouseup touchend', function () {
  writeMessage('松开或触摸结束');
});

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

Open Sandbox

React

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

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

  return (
    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer>
        <Text
          x={10}
          y={10}
          fontFamily="Calibri"
          fontSize={24}
          text={message}
          fill="black"
        />
        <Circle
          x={window.innerWidth / 2}
          y={window.innerHeight / 2}
          radius={70}
          fill="red"
          stroke="black"
          strokeWidth={4}
          onMousedown={() => setMessage('按下或触摸开始')}
          onTouchstart={() => setMessage('按下或触摸开始')}
          onMouseup={() => setMessage('松开或触摸结束')}
          onTouchend={() => setMessage('松开或触摸结束')}
        />
      </Layer>
    </Stage>
  );
};

export default App;

Open Sandbox

Vue

<template>
  <v-stage :config="stageSize">
    <v-layer>
      <v-text :config="textConfig" />
      <v-circle
        :config="circleConfig"
        @mousedown="handleStart"
        @touchstart="handleStart"
        @mouseup="handleEnd"
        @touchend="handleEnd"
      />
    </v-layer>
  </v-stage>
</template>

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

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 circleConfig = {
  x: window.innerWidth / 2,
  y: window.innerHeight / 2,
  radius: 70,
  fill: 'red',
  stroke: 'black',
  strokeWidth: 4
};

const handleStart = () => {
  message.value = '按下或触摸开始';
};

const handleEnd = () => {
  message.value = '松开或触摸结束';
};
</script>

Open Sandbox