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，手动触发鼠标：输入/离开，鼠标：移动

回答

相关问题