飞行行程状态条的角度实现

Question

嗨，各位，我需要实现一个飞行旅行状态栏的角度。

1. 如果是继续旅行的话(如。班加罗尔到钦奈，钦奈到奥蒂)那么直线应该在第一层

2如果不是持续的旅行(如班加罗尔到钦奈，乌蒂到班加罗尔)，那么直线应该有一个箭头，并在一级。

1. 如果连续的旅行有相同的接送和掉落位置，那么那些将在2级在这里输入图像描述。

Answer 1

当我们想要“连接”不同的元素时，我们可以使用SVG。

首先，我们可以定义数据。我想玩具有一个数组

trips = [
    { text: 'BLR-MAA', level: 1 },
    { text: 'MAA-HYD', level: 1 },
    { text: 'BLR-HYD', level: 1 },
    { text: 'HYB-DEL', level: 0 },
    { text: 'HYB-DEL', level: 0 },
    { text: 'DEL-BLR', level: 1 },
  ];

我将从上到下的等级进行编号(0是最上端的)。

那么，你可以

 <div #wrapper class="wrapper">
    <ng-container *ngFor="let trip of trips; let i = index">
      <div
        #airport
        class="airport"
        [style.padding-top.px]="trip.level * 50"
      >
        {{ trip.text }}
      </div>
    </ng-container>
  </div>

哪里

.wrapper{
  display:flex;
  justify-content:space-between;
  flex-wrap: nowrap;
  min-height: 68px;
}
.wrapper::after{
  content:' '
}
.airport
{
  width:80px;
  text-align: center;
}

要绘制svg，我们需要创建一系列的“路径”。这个路径需要知道元素的with和包装器的宽度，这就是我们需要的原因。

@ViewChild('wrapper') wrapper:ElementRef
@ViewChild('airport') airport:ElementRef

“滑稽”是创建返回路径数组的函数。

getPaths()
  {
    const rect=this.wrapper.nativeElement.getBoundingClientRect();
    let width=this.airport.nativeElement.getBoundingClientRect().width
    const space=(rect.width-width*this.trips.length)/(this.trips.length)
    width=width+space
    const paths = [];

    this.trips.forEach((trip, i) => {
      if (i) {
        const fromY = this.trips[i - 1].level * 50+1; //add 1 to to allow showed the line
        const fromX = i * width - space;
        const toY = trip.level * 50+1; //add 1 to allow showed the line
        const toX = i *width;

        if (trip.level == this.trips[i - 1].level) {
          paths.push(
            'M' + fromX + ',' + fromY + ' L' + (toX) + ',' + toY
          );
        } else {
          const middle=(fromX+toX)/2)
          paths.push(
            'M' + fromX + ',' + fromY + ' C' + middle + ',' + fromY+
            ' '+middle+','+toY+' '+toX+','+toY
          );
        }
      }
    });
    return paths;
  }
}

看到两个相邻元素在同一个层次上，我们创建了一条线(我们使用M移动到原点，L来绘制这条线)

如果两个相邻元素处于不同的水平，我们就创建一条曲线(我们使用M移动到原点，用C创建曲线)

最后一个在创建包含在带有位置绝对值的div中的svg，以及在带有位置相对的div中的所有

<div style="position:relative">
  <div #wrapper class="wrapper">
    ...
  </div>
  <div style="position:absolute;top:.5rem">
    <svg stroke="red" fill="transparent" [attr.width]="wrapper.offsetWidth" 
             [attr.heigth]="wrapper.offsetHeight" >
      <path *ngFor="let path of paths" [attr.d]="path" />
    </svg>
  </div>
</div>

看看我们如何使用模板引用变量"wrapper“和offsetHeigth/offsetWidth为svg提供相同的宽度和宽度。

一个stackblitz