Wie bekomme ich einen Verweis auf Cytoscape Canvas Context?

Question

Ich brauche einen Verweis auf Cytoscape Canvas-Objekt und es ist 2D-Kontext. Wie kann ich das machen? Ich sehe kein "id" -Attribut auf der Leinwand.

Dank

Answer 1

Sie könnten ein Beispiel Cytoscape ‚s Canvas-Element und seinen Kontext in der folgenden Art und Weise ...

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

---

Hier erwerben, das zeigt, wie Sie den Kontext verwenden könnten um etwas auf die Leinwand zu zeichnen ...

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>

Answer 2

Sie sollten nicht versuchen, Cytoscapes Leinwand zu greifen. Cytoscape verwendet aus Leistungsgründen mehrere Leinwände und Sie können nicht garantieren, welche Art von Kontext gültig ist. Es kann context2d verwenden oder es kann webgl für die Leistung verwenden. Selbst wenn ein context2d verwendet wird, können Sie nicht verfolgen, wann oder welche Statusänderungen (z. B. Transformationen) auf der Zeichenfläche stattgefunden haben. Und indem Sie Ihre eigenen Änderungen vornehmen, können Sie Annahmen brechen, die Cytoscape getroffen hat.

Wenn Sie Overlay-Inhalte möchten, sollten Sie Ihre eigene Overlay-Leinwand erstellen. Im Allgemeinen sollten Sie dom-Elemente oder js-Objekte, die zu einer Lib gehören, nicht außerhalb der öffentlichen/dokumentierten API ändern.

Answer 3

Nach den Empfehlungen von @maxkfanz (Cytoscape dev) entwickle ich eine leichtgewichtige Cytoscape.js-Erweiterung namens , die eine Zeichenfläche über und/oder unter einem Diagramm erstellt. Es ermöglicht die volle Flexibilität, nach der Sie suchen.

Wenn Sie interessiert sind, überprüfen Sie die readme out!