CSSポリライン

//写在VUE项目中的


<テンプレート> 
  の<divのid = "アプリ"> 
    <DIV CLASS = "リスト"> 
      <DIV CLASS = "項目" V-のための"リストの中（項目、インデックス）" =：キー= "インデックス"> 
        <UL：クラス= "` dot_boxのdot_boxの$ {NN + 1} `" V-ため= "（MM、NN）[1,2,3]における"：キー= "NN"> 
          <LI：クラス= "`ドットドット$ {NN + 1} `"> 
            <Pクラス= "位置"> </ P> 
          </ LI> 
        </ UL> 
      </ div> 
      <DIV CLASS = "line_box"> 
        <P： "リスト内（項目、インデックス）"クラス= "`行ライン$ {索引} `" V-ため=：キー= "item.id"> </ P> 
      </ div>
    </ DIV> 
  </ DIV> 
</テンプレート> 

<スクリプト> 
輸出デフォルト{ 
  名： 'アプリケーション'、
  データ（）{ 
    リターン{
      リスト：[
        { ステータス：0、ID：105、所在地：{}}、
        {状態：1、ID：2003、所在地：{}}、 
        { 状態：1、ID：211、所在地：{}}、 
        { 状態：0、ID：13、場所：{}}、 
        { 状態：1、 ID：203、所在地：{}}、 
        { 状態：2、ID：22、場所：{}}、 
        { 状態：0、ID：23、場所：{}}、 
        { 状態：1、ID：213、場所：{}}、 
        { 状態：0、ID：273、所在地：{}}、 
        { 状態：2、ID：234、所在地：{}}、 
        { 状態：0、ID：324、所在地：{}}、
        {状態：1、ID：45、場所：{}}、 
        { 状態：0、ID：485、所在地：{}}、 
        { 状態：2、ID：15、場所：{}}、 
        {状態：1、ID：1105所在地：{}} 
      ] 
    } 
  }、  
        せて位置= {};
  作成（）{ 
    VM =このせ; 
  }、
  {）（搭載
    せVM =この; 
    vm.renderLine（）; 
    window.onresize =関数（）{ 
      vm.renderLine（）。
    } 
  }、
  コンポーネント：{ 
  }、
  メソッド：{ 
    renderLine（）{ 
      VM =このせ; 
      聞かせてドット= document.getElementsByClassName（ 'ドット'）; 
      .offsetHeight =ドットハイトせ[0]。
      幅=ドット[0] .offsetWidthを聞かせて、
      vm.list.forEach（（M、N）=> { 
        location.x =（m.status *幅）+（0.5×幅）+ m.status + 1; 
        location.y =（N *ハイト）+（0.5 *ハイト）+ N + 1; 
        m.location =場所。
        IF（N！= 0）{ 
          CSS = vm.lineStyle（vm.list [N-1] .location.x、vm.list [N-1] .location.y、vm.list [N] .locationをしましょう。 X、vm.list [N] .location.y）。
          $（ `.LINE $ {N - 1}`）.ATTR（ 'スタイル'、CSS）。
        } 
      }）
    }、
    をlineStyle（X1、Y1、X2、Y2線幅= 1、色= '＃666'）{ 
      rectX = X1 <X2を聞かせて？X1：X2; 
      rectY = Y1 <Y2てみましょうか？Y1：Y2; 
      聞かせてrectWidth = Math.abs（×1 - ×2）。
      rectHeight = Math.abs（Y1 - Y2）をしましょう。
      //弦长
      せstringWidth = Math.ceil（Math.sqrt（（rectWidth * rectWidth）+（rectHeight * rectHeight）））;
      ; / 2 - XPAD =（stringWidth rectWidth）させ 
      YPAD =（rectHeight -線幅）させ/ 2。
      聞かせてradNum = Math.atan2（（Y1 - Y2）、（X1 - X2））; 
      リターン`
        位置：絶対; 
        幅：$ {stringWidth} PX。
        高さ：$ {線幅} PX。
        背景色：$ {色}。
        変換：変換（$ {rectX + XPAD} PX、$ {rectY + YPAD} PX）に回転（$ {radNum} RAD）; `; 
    } 
  } 
} 
</ SCRIPT> 
<スタイルのlang = "SCSS"> 
HTML、本体{ 
  幅：100％。
  高さ：100％; 
} 
オール、リチウム{ 
  リストスタイル：なし。
} 
* { 
  マージン：0。
  パディング：0; 
} 
#app { 
  位置：相対。
  幅：100％;
} 
  .line_box { 
    幅：300ピクセル。
          左：0;
    高さ：700px; 
    //国境：1pxの緑色の固体;
    位置：絶対; 
    トップ：0; 
    左：0; 
    Zインデックス：2。
  } 
  .LIST { 
    ボーダー：1ピクセル緑色固体。
    幅：50％; 
    .item { 
      ディスプレイ：フレックス。
      .DOT { 
        幅：10vw。
        高さ：は50px; 
        国境：1pxのソリッドピンク。
        ボックスサイズ：ボーダーボックス; 
        位置：相対; 
        .location { 
          位置：絶対。
          幅：10pxの; 
          高さ：10pxの; 
          境界半径：100％。
          トップ：0; 
          右：0; 
          下：0; 
          マージン：自動;
          z屈折率：10。
          背景：緑; 
        } 
      } 
    } 
    .LINE { 
      位置：絶対。
    } 
  } 
</スタイル>

　エフェクト↓

私の上司傲慢な轟音のおかげで重要な部分（指定された多角形の機能）を達成します