Question

我正在尝试使用createjs画布在点击时在舞台的空白点添加新状态（圆圈），但在点击时拖动现有点。我假设问题是，当我尝试删除handleMove中的stagemousemove事件时，它没有正确删除，因为它没有专用的静态处理程序，但我不确定我是如何创建该处理程序的。

// create new state (circle)
function createState(e) {
  x = e.stageX
  y = e.stageY
  if (stage.children.every(el =>
      !(el.hitTest(x, y)) &&
      !(el.hitTest(x + 30, y + 30)) &&
      !(el.hitTest(x + 30, y - 30)) &&
      !(el.hitTest(x - 30, y + 30)) &&
      !(el.hitTest(x - 30, y - 30))
    )) {
    state = new createjs.Shape()
    state.graphics.ss(3)
                  .s('#777')
                  .f('#eaeaea')
                  .dc(x, y, 30)
    stage.addChild(state)
    state.on('mousedown', handleMove)
    stage.update()
  }
}

// drag and drop
function handleMove(e) {
  el = stage.getObjectUnderPoint(stage.mouseX, stage.mouseY);
  var offset = {
    x: el.x - e.stageX,
    y: el.y - e.stageY
  }
   stage.on('stagemousemove', (evt) => {
    el.x = offset.x + evt.stageX
    el.y = offset.y + evt.stageY
    stage.update()
  })
  stage.on('stagemouseup', (e) => {
    stage.off('stagemousemove', (evt) => {
      el.x = offset.x + evt.stageX
      el.y = offset.y + evt.stageY
      stage.update()
    })
  })
}

// determines whether to create new point
function handler(e) {
 if (stage.getObjectUnderPoint(stage.mouseX, stage.mouseY) == null)
   createState(e)
}

stage.on('stagemousedown', handler)

Answer 1

使用off()方法时，您必须将引用传递给result来电的on()。

let listener = stage.on('stagemousemove', (evt) => {
  el.x = offset.x + evt.stageX
  el.y = offset.y + evt.stageY
  stage.update()
});
stage.on('stagemouseup', (e) => {
  stage.off('stagemousemove', listener);
});

on方法为您自动创建一个函数闭包，以保持范围，ES5 JavaScript不会这样做。这允许您将范围参数传递给on，因此this是预期的范围。

使用箭头函数时，此闭包发生在ES5转换期间。你不能将类似的函数传递给off，因为它们不相等。

希望有所帮助！

创建形状/拖放

1 个答案: