1

我让自己陷入了一个巨大而奇怪的境地。我使用VivaGraph JS在浏览器中绘制概念图。我正在使用的具体实现依赖于 SVG，因此我的主要图形 DOM 元素是一个 SVG。

在节点之间创建边缘的过程中，我使用Paper.JS编写了一小段代码，它使用 HTML5 中的画布。事实上，我侵入了vektor.js提供的源代码，并简单地将其更改为监听 CTRL+MouseDown 事件。

这两个元素，svg 图和画布，重叠并且具有完全相同的尺寸。该图有节点和边缘被操纵，它们监听鼠标和键盘事件，遗憾的是我的画布也是如此。

实际上，使用画布的原因是我想在鼠标移动期间绘制一条线（矢量或边缘或弧线），以便在我实际创建之前向用户显示正在创建的边缘是什么图中的边。

我无法使用 SVG 来做到这一点（是的，我知道，它应该是可行的），而 Paper.js 让我非常容易做到这一点。

遗憾的是，根据这些 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
             }
         }

所有这些都发生在一个文件 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？

4

1 回答 1

1

由于没有人回答，我猜这是由于我的问题非常具体，我在stack overflow的另一篇文章中偶然发现了正确答案。奇怪的是，它没有被接受为正确答案。

海报提出以下建议：

quickDelegate = function(event, target) {
            var eventCopy = document.createEvent("MouseEvents");
            eventCopy.initMouseEvent(event.type, event.bubbles, event.cancelable, event.view, event.detail,
                event.pageX || event.layerX, event.pageY || event.layerY, event.clientX, event.clientY, event.ctrlKey, event.altKey,
                event.shiftKey, event.metaKey, event.button, event.relatedTarget);
            target.dispatchEvent(eventCopy);
            // ... and in webkit I could just dispath the same event without copying it. eh.
        };

这对我有用，这是唯一有效的方法。我尝试了在 github 上找到的其他应该转发事件的库，但它们不起作用。

于 2015-04-29T17:04:27.583 回答