【Konva】多事件(Multi-Event)与多端事件处理

发布时间 2023-07-25 01:28:02作者: Himmelbleu

除了 Konva 中图形(Shape)的单个事件以外,还可以在同一个 on 中定义多个事件,并同时触发同一个回调函数。

file:[multi-event]
const stage = new Konva.Stage({
  container: "container",
  width: window.innerWidth,
  height: window.innerHeight
});

const layer = new Konva.Layer();

const circle = new Konva.Circle({
  x: stage.width() / 2,
  y: stage.height() / 2 + 10,
  radius: 70,
  fill: "red",
  stroke: "black",
  strokeWidth: 4
});

circle.on("mouseover mousedown mouseup", function (e) {
  console.log(e);
});

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

多个事件同时触发

在不同设备上(PC端 和移动端)的事件名称是不一样的,对于同一个处理逻辑,不希望重复写两次,那么就可以通过多事件来实现。比如,为了 PC 端响应 mousedown 事件,同时也希望在移动端响应 tochstart 事件,我们可以给 on 函数中这样写:

file:[multi-event]
del:[circle.on("mouseover mousedown mouseup", function (e) {]
add:[circle.on("mousedown touchstart", function (e) {]
  console.log(e);
});