如何在 ngx-cytoscape 中获取 cy 对象的引用？

Question

我正在尝试使用 ngx-cytoscape。

我已经设法使其工作并显示了图形，但下一步需要获取对 cy 对象的引用。

在 ngx-cytoscape 的 GitHub 页面上有一个添加插件的示例，但它没有说明应该将代码片段添加到哪个文件中，或者还需要什么才能让它工作。

有人可以帮忙吗？

Answer 1

演示组件

这里有完整版的演示组件 - https://github.com/calvinvette/ngx-cytoscape/blob/master/cytodemo/cytodemo.component.ts

正在获取对 cy 对象的引用。

您可以通过在您的组件中使用 @ViewChild 通过 cy 对象获取引用，并且您可以在 [=14= 中从该引用组件获取对 cy 对象的访问] 函数。

@ViewChild(CytoscapeComponent)
private cytograph: CytoscapeComponent;

ngAfterViewInit() {
      if (this.cytograph.cy) {
        const cyLayer = this.cytograph.cy.cyCanvas();
        const cnv: HTMLCanvasElement = cyLayer.getCanvas();
        const ctx: CanvasRenderingContext2D = cnv.getContext("2d");
        // ...
          this.cytograph.cy.on("render cyCanvas.resize", function(evt, src) {
              // "this" is now "cy" inside this callback function
              cyLayer.resetTransform(ctx);
              cyLayer.clear(ctx);
              ctx.fillStyle = "#ff00ff";
              //ctx.fillRect(0, 0, 100, 100); // Top left corner
              cyLayer.setTransform(ctx);

              const width = cnv.width;
              const height = cnv.height;
              const data = Array(width * height);

              // Draw model elements
              this.nodes().forEach(function(node) {
                  const pos = node.position();
                  // Do something with canvas at or around the node's position
                  ctx.fillRect(pos.x - 25, pos.y - 25, 50, 50); // At node position (bisection point of 50x50 rectangle)
              });
          });
      }
      // ...
  }

如何在 ngx-cytoscape 中获取 cy 对象的引用？

How can I get a reference of the cy object in ngx-cytoscape?

angular

cytoscape.js

演示组件

正在获取对 cy 对象的引用。