监听事件

为矩形添加鼠标进入/离开事件效果。

ts

  1. import { Leafer, Rect, PointerEvent } from 'leafer-ui'
  3. const leafer = new Leafer({ view: window })
  5. const rect = new Rect({
  6.     x: 100,
  7.     y: 100,
  8.     width: 200,
  9.     height: 200,
  10.     fill: '#32cd79', // 背景色
  11.     stroke: 'black', // 边框
  12.     strokeWidth: 2, // 边框粗细
  13.     draggable: true
  14. })
  16. leafer.add(rect)
  19. function onEnter(e: PointerEvent) {
  20.     (e.current as Rect).fill = '#42dd89'
  21. }
  23. function onLeave(e: PointerEvent) {
  24.     (e.current as Rect).fill = '#32cd79'
  25. }
  27. rect.on(PointerEvent.ENTER, onEnter)
  28. rect.on(PointerEvent.LEAVE, onLeave)

使用字符串

了解事件类型的字符串命名规则。

ts

  1. rect.on('pointer.enter', onEnter)
  2. rect.on('pointer.leave', onLeave)

移除事件

ts

  1. rect.off('pointer.enter', onEnter)
  2. rect.off('pointer.leave', onLeave)

派发事件

ts

  1. rect.emit('pointer.enter', { current: rect })

恭喜 🎉

你已完成基础知识的学习，接下来将学习几个重要的进阶知识。