javascript - Paper.JS (HTML5) Canvas と VivaGraphJS(SVG) Graph のオーバーラップ: イベントのキャプチャ

Question

私は自分自身を大きくて奇妙な立場に陥らせました。ブラウザで概念グラフを描画するためにVivaGraph JSを使用しています。私が使用している特定の実装は SVG に依存しているため、メインのグラフ DOM 要素は SVG です。

ノード間のエッジの作成中に、HTML5 のキャンバスを使用するPaper.JSを使用して小さなコードを書きました。実際、私はvektor.jsが提供するソース コードをハックして、 CTRL+MouseDown イベントをリッスンするように単純に変更しました。

これら 2 つの要素、svg グラフとキャンバスは重なり合っており、まったく同じ寸法になっています。グラフには、マウスとキーボードのイベントをリッスンする操作されたノードとエッジがあり、悲しいことに私のキャンバスもそうです。

実際、キャンバスを使用する理由は、実際に作成する前に、作成されるエッジが何であるかをユーザーに示すために、マウスの移動中に線 (ベクトル、エッジ、またはアーク) を描画したかったからです。グラフのエッジ。

私は SVG を使用してこれを行うことができませんでした (はい、できるはずです)。

残念なことに、これらの DOM 要素が表示される順序に応じて、キャンバスがイベントをキャプチャしてグラフが役に立たなくなるか、グラフがすべてのイベントをキャプチャしてキャンバスが役に立たなくなるかのいずれかになります。

両方の DOM 要素に透過性を追加する方法はありますか?

グラフのイベント リスナーは VivaGraphJS に組み込まれており、Paper Vertex のイベント リスナーは Paper.JS に組み込まれています。

理想的には、グラフを一番上に置き、イベントをキャプチャしてからキャンバスに戻して、矢印が描画されるようにしたいと考えています。純粋な JavaScript を介して、または jQuery を使用して、これを実行できるはずだと感じています。

これまでのところ、グラフに記録されたイベントは次のようになります。

var graphics = Viva.Graph.View.svgGraphics();
/// some other stuff
graphics.node( function( node )
{
   var ui = Viva.Graph.svg('g' ).attr('width', nodeSize )
                                .attr('height', nodeSize )
    // Position the node, add its text, etc, etc...

    $( ui ).mousedown( function( event ) 
    {
         event.preventDefault();           
         if ( event.ctrlKey )
         {
             if ( ctrl_mouse )
             {
                 createEdge( ctrl_mouse, node.id );
                 ctrl_mouse = null;
                 // Remove the temporary arrow from canvas - the graph now has a permanent edge
             }
             else if ( !ctrl_mouse )
             {
                 ctrl_mouse = node.id;
                 // Start drawing a temporary arrow on canvas
             }
         }

これはすべて、1 つのファイル graph.js で行われます。別のファイル edge.js では、イベント リスナーとベクトルの描画方法をセットアップします。私はそれをjsfiddleに追加しましたが、残念ながらそこでは実行されません(キーボードイベントが適切に伝播されない可能性があると思いますか?)。

問題は、Paper.Js に独自のイベント リスナーがあることです。

function onMouseDown( event )
function onKeyUp( event )
function onMouseMove(event) 

もちろん、これらのイベントは純粋な JavaScript と jQuery に同等のものがありますが、VivaGraphJS ま​​たは jQuery でキャプチャしたイベントは、異なるオブジェクトであるため、PaperJS に伝達できません。

では、どういうわけか (できれば純粋な JavaScript を使用しますが、jQuery も機能します)、これらのイベントをエミュレートしたり、Paper.JS に送信したりできますか?