形状を作成する/ドラッグアンドドロップする

Question

私はcreatejsキャンバスを使って、クリック時にステージの空き領域に新しい状態（円）を追加しようとしていますが、クリック時に既存の点をドラッグします。私は問題がそれは専用の静的なハンドラを持っていないので、それが適切に削除されないhandleMoveでstagemousemoveイベントを削除しようとしていると仮定しているが、私はそのハンドラを作成する方法もわからない。あなたがoff()メソッドを使用する場合

// 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

することは、あなたは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に同じ機能を渡すことはできません。同じ機能ではないからです。

希望に役立ちます！