konva系列教程5：事件

大家好，我是前端西瓜哥，我们今天来看看 Konva 的事件系统 。

Konva 的图形同时支持 PC 端和移动端事件， 包括 DOM 元素类似的事件，如 Mouse、Touch、Pointer 事件。

此外还有一些特别的事件：

• tap：轻敲，属于移动端的 Touch 类事件；
• dbltap：连续轻敲两下；
• dragstart / dragmove / dragend：拖拽开始/移动/结束事件。Konva 支持给一个图形设置为可拖拽，然后可以通过鼠标移动，该行为对应的时间就是这些；
• transformstart / transform / transformend：Konva 也支持给一个图形添加形变特性，可以拖拽控制点做图形缩放和旋转操作，这些操作对应这三个事件。

添加事件

绑定事件使用 on(evtStr, handler) 方法。很多类都有这个方法，是继承自 Konva.Node 类的。

参数说明：

• evtStr：字符串形式的事件名；
• handler：事件响应函数，该函数会拿到一个 Konve 封装的事件对象；

返回值为调用者本身，这样就可以做链式调用。

我们创建一个矩形：

const rect = new Konva.Rect({
  x: 30,
  y: 30,
  width: 300,
  height: 300,
  fill: "red"
});

给这个矩形绑定点击事件的写法为：

rect.on("click", (event) => {
  console.log(event);
});

event 对象

handler 获取的 event 对象属性有：

• type：事件名，比如 "click"、"dragmove"；
• target：事件发生的具体目标元素；
• currentTarget：图形所在顶部 stage 对象；
• evt：对应的原生事件对象。Konva 的事件对象是基于原生事件对象的封装，比如 drag 相关的对应原生的 Mouse 事件对象；
• pointerId：其实就是对应原生 Pointer 事件的 pointerId，用于 Pointer 事件的标识。

事件流

Konva 支持事件冒泡，但不支持事件捕获。

子节点的事件会冒泡到父节点。

我们在 stage 节点下，加入 rect 图形，然后对它们设置事件监听。

stage.on("click", (event) => {
  console.log("stage click");
});

rect.on("click", (event) => {
  console.log("rect click");
});

我们点击 rect 图形，输出结果为：

rect click
stage click

是冒泡的逻辑：先执行 rect 的事件，然后再执行 stage 事件。

阻止冒泡事件

可以将 event.cancelBubble 设置为 true 来阻止冒泡：

rect.on("click", (event) => {
  event.cancelBubble = true;
  console.log("rect click");
});

其他

• fire(evtName)：模拟特定事件的发生，这种情况下无法拿到原生事件对象；
• off(evtName[, handler])：如果只有 evtName，移除该事件下所有监听器；如果同时有 evtName 和 handler，会移除 evtName 中的监听器集合中指定的 handler；

结尾

本文简单讲解了 Konva 的事件系统和用法，赶紧练习去吧。

我是前端西瓜哥，欢迎关注我，学习更多知识。