使用 SVG 角度视图框将路径显示为 4 段

Question

我有非常大的铁路轨道作为svg路径中的路径...但我想将轨道分成4部分并一一显示...请建议我一个角度代码

我尝试将值分成 4 并标记坐标，但它导致上一个轨道中缺少行，请帮助我解决其他问题 TS： const splitData = this.final; const chunkSize = Math.ceil(splitData.length / 4);

  this.part1 = splitData.slice(0, chunkSize);
  this.part2 = splitData.slice(chunkSize, 2 * chunkSize);
  this.part3 = splitData.slice(2 * chunkSize, 3 * chunkSize);
  this.part4 = splitData.slice(3 * chunkSize);

Answer 1

如果不知道你的整个路径，这是很困难的我想你可以得到最后一行并以 M 进行变换，例如

this.part2 = ['M'+splitData[chunkSize-1].substring(1),...splitData.slice(chunkSize, 2 * chunkSize)];

this.part3 = ['M'+splitData[2*chunkSize-1].substring(1),...splitData.slice(2*chunkSize, 3 * chunkSize)];

this.part4 = ['M'+splitData[3*chunkSize-1].substring(1),...splitData.slice(3 * chunkSize)];

“我想将曲目分成4份并一一显示...”

所以你需要执行一个函数 4 次，暂停一下，直到执行两次对该函数的连续调用

为此你可以使用rxjs

    <ng-container *ngIf="obs$|async as time">
        <div *ngIf="time>=1">One</div>
        <div *ngIf="time>=2">Two</div>
        <div *ngIf="time>=3">Three</div>
        <div *ngIf="time>=4">Four</div>
    </ng-container>
    <button (click)="timer()">init</button>

  obs$!:Observable<any>
  timer()
  {
    //I put a delay
    this.obs$=timer(500,500).pipe(
       map(x=>x+1), //the observable return 1,2,3,4 each 500 miliseconds
       take(4))
  }