除了 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);
});