創建形狀/拖放和放下

我正在嘗試使用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)

來源

2017-05-24 Greg Wolff

當您使用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，因爲它們不相同。

希望有幫助！

來源

2017-05-24 15:16:18 Lanny

謝謝Lanny，這工作完美。我不知道你可以從'on（）'調用返回一個引用。儘管處理程序有一個問題。當我點擊一個現有的狀態（圓圈）並快速拖動時，它會沿着我拖動的方向創建一個新狀態，而不是實際拖動圓圈。 –

聽起來好像你的'handler（）'每次都在觸發。請注意，無論點擊什麼，「stagemousedown」每次都會觸發。另一件事 - 你看看「pressmove」事件處理程序？對拖放操作進行很多監聽器管理。 – Lanny

我已經看過''pressmove''，但是在計算沒有兩個處理程序時拖動的偏移量時遇到了問題。我明白每次都會觸發'stagemousedown'，但是如果點擊目標是一個狀態，我的'if'語句不應該創建新的狀態嗎？看起來有點拖延時，點擊並拖動快速。 [在這裏看到一個演示]（http://www.greg-wolff.com/fasdemo）。請注意，如果您快速點擊並拖動某個狀態，它會創建一個新狀態。在控制檯中記錄鼠標目標。 –

創建形狀/拖放和放下

回答

相關問題