如何在Angular中正确测量svg组尺寸？

如何解决如何在Angular中正确测量svg组尺寸？

我正尝试在Angular的帮助下构建一个工具，以可视化类似于TensorBoard的图形。我的意图是可视化构建工具面板输出的依赖关系图。为了突出显示图形，我想绘制一个rect作为背景。我当前的方法是绘制一组中的节点和边，测量该组的尺寸，并相应地设置矩形的宽度和高度。如果我通过扩展或最小化节点来更改图形结构，则背景rect无法正确更新。我猜想这是因为未对组件数据进行任何更改，因此Angular不会更新视图。

您将在此处找到源代码：https://github.com/dprogm/graph-explorer

图形模板如下：

<svg:rect
  attr.width="{{_graph.width}}"
  attr.height="{{_graph.height}}" />

<svg:g #graphRef>
  <svg:path  *ngFor="let edge of _graph.edges"
    class="edge"
    [attr.d]="buildPath(edge)" />

  <svg:g app-graph-node *ngFor="let node of _graph.nodes"
    [node]="node"
    (nodeChange)="onNodeChanged($event)"></svg:g>
</svg:g>

#graphRef是一个ElementRef，用于查询边界框：

if(this.graphRef !== undefined) {
  let graphBBox = this.graphRef.nativeElement.getBBox();
  this._graph.width = graphBBox.width;
  this._graph.height = graphBBox.height;
}

主要问题是：有没有更好的方法来测量图形的大小，如果没有，我该如何获得正确的尺寸？

您可以在此处重现该问题：https://stackblitz.com/edit/angular-ivy-mkmkm6?file=src/app/app.component.html 如果单击圆圈，它将更改大小。我希望黑色矩形也更改其大小以适合圆圈。

解决方法

一种方法是使用requestAnimationFrame()：

import { Component,ElementRef,ViewChild,AfterViewInit,VERSION } from '@angular/core';
import { Observable } from 'rxjs';

@Component({
  selector: 'my-app',templateUrl: './app.component.html',styleUrls: [ './app.component.css' ]
})
export class AppComponent implements AfterViewInit  {

  // Background width
  bgWidth = 0;
  // Background height
  bgHeight = 0;
  // Radius of the circle
  r = 100;
  // Stroke width of the circle
  strokeWidth = 5;
  // Whether to draw a large or small circle
  largeMode: Boolean = true;

  @ViewChild('groupRef')
  groupRef : ElementRef;

  ngAfterViewInit(): void {
    requestAnimationFrame(()=> this.setRectSize());
  }

  setRectSize(): void {
    let groupBBox = this.groupRef.nativeElement.getBBox();
    this.bgWidth = groupBBox.width;
    this.bgHeight = groupBBox.height;
  }

  changeSize() : void {
    this.largeMode = !this.largeMode;
    if(this.largeMode) {
      this.r = 100;
    } else {
      this.r = 50;
    }
    requestAnimationFrame(()=> this.setRectSize());
  }
}