Konva 2D绘图mousedown事件如何传递额外参数及跨文件绑定报错处理

错误原因 #

1. 事件绑定时直接执行了handleMouseDown函数：stage.on方法要求第二个参数是事件触发时才执行的回调函数，你写handleMouseDown(evt, stage)会在绑定阶段就直接调用该函数，把返回值（默认是void）传给on方法，因此触发类型不匹配报错；同时此时事件对象evt还未生成，自然找不到变量。
2. 不能在函数作用域内使用export语法：ES模块的export只能写在模块顶层作用域，写在函数内部属于语法错误。

解决方案 #

方案1：匿名函数包裹传参（最常用，适合大多数场景） #

绑定事件时用箭头函数中转，事件触发时再传入参数即可：

// stage初始化文件代码
import { handleMouseDown } from './stageEvents'
export default (): void => {
  const stage: Stage = new Konva.Stage({
    container: 'container',
    height: 500,
    width: 500
  })
  // 用箭头函数做中转，传参给处理函数
  stage.on('mousedown', (evt) => handleMouseDown(evt, stage))
}

注意如果后续需要解绑事件，需要把这个箭头函数存为变量再绑定，否则stage.off找不到对应回调。

方案2：柯里化处理函数（适合需要频繁解绑/复用的场景） #

修改handleMouseDown的定义，让它接收stage参数后返回符合类型要求的事件监听器：

// ./stageEvents 文件代码
import type { Stage, KonvaEventObject } from 'konva/lib/Stage'
export const handleMouseDown = (stage: Stage) => (evt: KonvaEventObject<MouseEvent>) => {
  // 原有处理逻辑，直接用stage和evt即可
}

绑定事件时直接传入stage即可：

// stage初始化文件中绑定
stage.on('mousedown', handleMouseDown(stage))
// 解绑时也可以直接用同一个引用
stage.off('mousedown', handleMouseDown(stage))

方案3：顶层导出stage实例（适合多文件共用stage的场景） #

把stage实例提到模块顶层声明，再在初始化函数中赋值，其他文件直接导入使用即可：

// stage初始化文件代码
import { handleMouseDown } from './stageEvents'
import type { Stage } from 'konva/lib/Stage'
// 顶层声明并导出stage实例，初始值为null
export let stage: Stage | null = null

export default (): void => {
  stage = new Konva.Stage({
    container: 'container',
    height: 500,
    width: 500
  })
  stage.on('mousedown', handleMouseDown)
}

事件处理文件中直接导入stage使用：

// ./stageEvents 文件代码
import { stage } from './stage初始化文件'
export const handleMouseDown = (evt: KonvaEventObject<MouseEvent>) => {
  // 调用前判断stage是否初始化完成，避免空值报错
  if (!stage) return
  // 原有处理逻辑
}

内容的提问来源于stack exchange，提问作者LukasGur