Fabric.js、手動トリガーマウス：enter/leave、mouse：move

Question

現在、fabric.js-initialisedキャンバステクスチャを含むAフレームプレーンから送出された合成イベントをプロキシする方法を検討中です。目標は、2Dキャンバスと相互作用しているかのように、ユーザーがファブリックアイテムをドラッグアンドドロップできるようにすることです。すべてのロジックが処理されるようになりました。たとえば、プログラムで、0,0の下にあるアイテムを取得し、それを10,10にドラッグして放すことができるようにしたいだけです。

'mouse：out'ハンドラでイベントパラメータを検査したとき、私はオブジェクトにMouseEventインスタンスの 'e'パラメータがあることに気付きました。だから私はこのような何かを試した：

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 }) 

それは動作していないようだ。トリガーメソッドの2番目のパラメーターとしてeventOptionsを提供していませんでした。また、ファブリックキャンバス上のプライベートハンドラメソッド、つまり_onMouseMoveを呼び出すこともできませんでした。

これを実現する方法はありますか？

Answer 1

したがって、fabricCanvasはキャンバスにオーバーレイされた要素からイベントを取得し、いくつかのイベントリスナをトリガします。

適切なパターンでイベントをリスナーに直接転送することをお勧めします。 mousedown、マウス、マウスアップ。

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

このイベントはこれが

を動作するはずだけ

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

をexecし、正しい場合、左/右/ミドルクリックを理解するために、ファブリックを使用しているbutton/buttons/whichの種類を確認してください。