Question

我目前正致力于一种代理从包含fabric.js初始化画布纹理的A-Frame平面发出的合成事件的方法。目标是允许用户拖放布料项，就像它们与2D画布交互一样。所有的逻辑都被处理了所以现在我只想要能够以编程方式抓取0,0下的项目，将其拖动到10,10并放开它。

当我在'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。

有没有办法实现这个目标呢？

Answer 1

因此，fabricCanvas从覆盖在画布上的元素中获取事件并触发一些事件侦听器。

最好的方法是使用正确的模式将事件直接转发给侦听器。 mousedown，mousemove，mouseup。

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

如果此事件正确，只需执行

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

这应该有效

请检查哪种button/buttons/which使用布料来了解左/右/中间点击。

Fabric.js，手动触发鼠标：进入/离开，鼠标：移动

1 个答案: