我如何獲得對Cytoscape畫布上下文的參考？

我需要對Cytoscape Canvas對象的引用，它是2D上下文。我怎樣才能做到這一點？我在畫布上看不到任何「id」屬性。我如何獲得對Cytoscape畫布上下文的參考？

感謝

2017-05-10 Aravind

您可能獲得的Cytoscape 的 canvas元素及其以下方式背景下...

var canvas = document.querySelector('canvas[data-id="layer2-node"]'); 
var context = canvas.getContext('2d');

下面是一個例子，展示瞭如何使用上下文在畫布上畫東西...

var cy = cytoscape({ 
 
    container: document.getElementById('cy'), 
 
    elements: [ 
 
     { data: { id: 'a' } }, 
 
     { data: { id: 'b' } }, 
 
     { 
 
      data: { 
 
       id: 'ab', 
 
       source: 'a', 
 
       target: 'b' 
 
      } 
 
     } 
 
    ] 
 
}); 
 

 
var canvas = document.querySelector('canvas[data-id="layer2-node"]'); 
 
var context = canvas.getContext('2d'); 
 

 
// draw rectangle using general canvas method 
 
function draw() { 
 
    context.fillRect(canvas.width/2.1, 60, 30, 30); 
 
    requestAnimationFrame(draw); 
 
} 
 
draw();

<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.1.0/cytoscape.min.js"></script> 
 
<div id="cy" style="width: 100%; height: 100%; position: absolute; top: 0px; left: 0px;"></div>

來源

2017-05-10 19:56:33

謝謝！這有幫助。 – Aravind

這不建議，它不會是一個穩定的解決方案。如果您可以在您的應用中使用猴子補丁類型的東西，並且可以鎖定您使用的並且從不升級的Cytoscape的確切版本，那麼此解決方案可以正常運行。上述代碼所做的任何假設都沒有記錄/保持穩定，並且可以隨時更改 - 即使是補丁發佈。 – maxkfranz

你不應該試圖抓住Cytoscape的畫布。由於性能原因，Cytoscape使用了多個畫布，並且不能保證哪種類型的上下文有效。它可能使用context2d，或者可能使用webgl來提高性能。即使使用了context2d，也無法跟蹤畫布上發生何時或發生了哪些狀態更改（例如轉換）。通過做出自己的改變，你可能會破壞Cytoscape的假設。

如果要疊加內容，應該製作自己的疊加畫布。您通常不應修改屬於公共/記錄API以外的lib的dom元素或js對象。

來源

2017-05-23 18:07:49 maxkfranz

按照@ maxkfranz（Cytoscape dev）的建議，我開發了一個名爲cytoscape-canvas的輕量級Cytoscape.js擴展，該擴展在圖形上方和/或下方創建畫布。它使您能夠充分發揮您的靈活性。

Preview

如果你有興趣，請查看readme！

來源

2017-07-11 03:07:24

我如何獲得對Cytoscape畫布上下文的參考？

回答

相關問題