konva系列教程5:事件
2023-02-18 16:37:42 时间
大家好,我是前端西瓜哥,我们今天来看看 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 的事件系统和用法,赶紧练习去吧。
我是前端西瓜哥,欢迎关注我,学习更多知识。
相关文章
- 让一个模型兼容多种数据的3种方法
- 用检索的思路做时间序列预测是一种怎样的体验
- 盘点5类推荐系统中图学习解决冷启动问题的方法
- NLP技术在搜索推荐场景中的应用
- CTR预估中实现高效笛卡尔积特征交叉的方法
- 让时间序列预测结果更真实的损失函数
- Graph对比学习——新一代的图无监督预训练方法
- 分解学习+对比学习实现更清晰的时间序列预测建模
- 从NIPS'22的3篇文章看Vision Transformer最新研究进展
- 多模态预训练常见问题:为什么不同模态表征存在gap?
- 使用Domain Adaption提升小场景时间序列预测效果的方法
- EMNLP'22 语言模型训练方法优化工作
- 抽象之美—万物皆可设计
- ShardingJdbc分库分表浅谈
- 低代码开发浅析
- 1024的程序员是蒙娜丽莎
- Java这些最基础的知识,你还记得多少?
- 快速排序递归详解
- Spring架构浅析
- 这些并发编程知识,一定要知道