重疊Paper.JS（HTML5）Canvas和VivaGraphJS（SVG）圖：捕獲事件

我已經讓自己陷入了一個巨大而奇怪的位置。我使用VivaGraph JS在瀏覽器中繪製Conceptual Graphs。我使用的具體實現依賴於SVG，因此我的主圖DOM元素是SVG。重疊Paper.JS（HTML5）Canvas和VivaGraphJS（SVG）圖：捕獲事件

在創建節點之間的邊界期間，我使用Paper.JS編寫了一小段代碼，它使用HTML5中的畫布。事實上，我侵入了vektor.js提供的源代碼，並將其改爲聽取CTRL + MouseDown事件。

這兩個元素svg圖形和畫布重疊並具有完全相同的尺寸。該圖形有節點和邊緣的操縱，它們監聽鼠標和鍵盤事件，可悲的是我的畫布也是如此。

實際上，使用畫布的原因是我想在鼠標移動過程中繪製一條直線（一個矢量或一條邊或一條弧線），以向用戶展示正在創建的邊緣是什麼我實際上在圖表中創建了這條邊。

我不能用SVG做這個（是的，我知道，它應該是可行的），而Paper.js對我來說非常簡單。

不幸的是，根據順序顯示這些DOM元素，畫布捕獲事件，使圖形無用，或者圖形捕獲所有事件，導致畫布無用。

有沒有方法可以爲兩個DOM元素添加透明度？

事件偵聽器圖形，內置VivaGraphJS，以及事件偵聽紙頂點，內置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？

來源

2015-04-28 Ælex

由於沒有人回答，我猜這是由於我的問題非常具體的性質，我偶然在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-29 17:04:27

重疊Paper.JS（HTML5）Canvas和VivaGraphJS（SVG）圖：捕獲事件

回答

相關問題