Fabric.js，手動觸發鼠標：輸入/離開，鼠標：移動

我目前正在研究一種方法來代理從包含fabric.js初始化的畫布紋理的A-Frame平面發出的合成事件。目標是允許用戶拖放織物項目，就好像它們正在與2D畫布進行交互。所有的邏輯處理，所以現在我只是想能夠，例如，編程方式抓住和0,0項目，將其拖動到10,10放開它。Fabric.js，手動觸發鼠標：輸入/離開，鼠標：移動

當我檢查了'mouse：out'處理程序中的事件參數時，我注意到該對象有一個'e'參數，它是一個MouseEvent實例。所以我嘗試了這樣的事情：

let eventOptions = { 
    clientX, 
    clientY, 
    bubbles: true, 
    button: 1 
} 

let fabricCanvas = this.components.draw.fabricCanvas 
let e = new MouseEvent(event.type, eventOptions) 
fabricCanvas.trigger(aFrameEvtToFabricEvt[event.type], { e })

這似乎沒有工作。也沒有提供eventOptions作爲觸發方法的第二個參數。也沒有在織物畫布上調用私人處理器方法，即_onMouseMove。

有沒有其他方法可以實現呢？

來源

2017-07-15 J. Barca

做了一些調試觸發函數和觸發器永遠不會導致拖放功能的原因是因爲如果沒有爲這些事件註冊特定的事件處理程序，觸發器（fire）函數將始終返回。拖放功能的事件處理程序必須在別處處理。 –

所以fabricCanvas從疊加在畫布上的元素中獲取事件並觸發某些事件偵聽器。

最好的事情是將事件直接轉發給聽衆，並使用正確的模式。 mousedown，mousemove，mouseup。

let eventOptions = { 
    clientX, 
    clientY, 
    bubbles: true, 
    button: 1 
}

如果此事件是正確的，只是Exec的

fabricCanvas._onMouseDown(e) 
fabricCanvas._onMouseMove(eAnotherPoint) 
fabricCanvas._onMouseUp(eAnotherPoint)

這應該工作

請檢查什麼樣的button/buttons/which用布來了解左/右/中點擊。

來源

2017-07-15 09:04:19 AndreaBogazzi

感謝您的提示，我會盡力調查可能性。問題是織物畫布似乎不在DOM中。你知道是否有方法通過引用訪問偵聽器元素？ –

編輯：我發現事件捕獲爲fabricCanvas.upperCanvasEl –

觸發eventCapture元素上的事件，因此失敗。 ''let e = new MouseEvent（event.type，eventOptions） fabricCanvas.upperCanvasEl.dispatchEvent（e）'''。我也嘗試在容器上調度也失敗。只有通過canvas.trigger觸發的事件纔會觸發相應的事件偵聽器，但似乎無法以這種方式創建鼠標事件（除了點擊）。 –

Fabric.js，手動觸發鼠標：輸入/離開，鼠標：移動

回答

相關問題