如何获取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对象的引用。

您可以通过在组件中使用cy来获得@ViewChild对象的引用，并且可以在cy函数中从该引用组件中获得ngAfterViewInit对象的访问权限

@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)
              });
          });
      }
      // ...
  }