创建形状/拖放和放下

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()方法，你必须通过一个参考到on()呼叫result。

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，因为它们不相同。

希望有帮助！