如何使用角形材料设计箭头网格

Question

下面的链接中的图像，我需要使用角形材料设计ui，对此的任何想法对我都非常有帮助。

Answer 1

您可以使用SVG指令。 SVG就像HTML一样是标记，浏览器允许将<svg>直接嵌入HTML文档。这是一个简单的示例：

<svg viewBox="0 0 250 250">
  <polygon points="125,30 125,30 125,30 31.9,63.2 46.1,186.3 125,230 125,230 125,230 203.9,186.3 218.1,63.2" />
  <polygon points="125,30 125,52.2 125,52.1 125,153.4 125,153.4 125,230 125,230 203.9,186.3 218.1,63.2 125,30" />
  <path d="M125,52.1L66.8,182.6h0h21.7h0l11.7-29.2h49.4l11.7,29.2h0h21.7h0L125,52.1L125,52.1L125,52.1L125,52.1
      L125,52.1z M142,135.4H108l17-40.9L142,135.4z"/>
</svg>

Source

Answer 2

这是设计箭头的解决方案

public arrowHeadFstRow: any[] = [];
  public arrowHeadSndRow: any[] = [];
  public arrowHeadTrdRow: any[] = [];
  public arrowHeadfthRow: any[] = [];

  arrowGrid(data) {
    this.gridData = data;
    let row2 = []; let row3 = []; let row4 = []; let row5 = []; let row6 = []; let row7 = []; let row8 = []; let row9 = []; let row10 = [];
    //First Row
    for (let i = 62; i > 60; i--) {
      this.arrowHeadFstRow.push({ cell: i, isSelected: false })
    }
    for (let i = 1; i <= 1; i++) {
      //Second Row
      for (let j = 60; j > 52; j--) {
        row2.push({ cell: j, isSelected: false });
      }
      for (let j = 52; j > 44; j--) {
        row5.push({ cell: j, isSelected: false });
      }
      for (let j = 44; j > 36; j--) {
        row6.push({ cell: j, isSelected: false });
      }
      for (let j = 36; j > 28; j--) {
        row7.push({ cell: j, isSelected: false });
      }
      for (let j = 28; j > 20; j--) {
        row8.push({ cell: j, isSelected: false });
      }
      //Third Row
      for (let j = 20; j > 14; j--) {
        row3.push({ cell: j, isSelected: false });
      }
      for (let j = 14; j > 8; j--) {
        row9.push({ cell: j, isSelected: false });
      }
      //Fourth Row
      for (let j = 8; j > 4; j--) {
        row4.push({ cell: j, isSelected: false });
      }
      for (let j = 4; j >= 1; j--) {
        row10.push({ cell: j, isSelected: false });
      }
    }
    this.arrowHeadFstRow.reverse();
    this.arrowHeadSndRow.push(row2.reverse());
    this.arrowHeadSndRow.push(row5.reverse());
    this.arrowHeadSndRow.push(row6.reverse());
    this.arrowHeadSndRow.push(row7.reverse());
    this.arrowHeadSndRow.push(row8.reverse());
    this.arrowHeadTrdRow.push(row3.reverse());
    this.arrowHeadTrdRow.push(row9.reverse());
    this.arrowHeadfthRow.push(row4.reverse());
    this.arrowHeadfthRow.push(row10.reverse());
  }
 genrateGrid(data,size) {
    for (var i=0; i<data.length; i+=size) {
        if(size ==9) this.gridArray9.push(data.slice(i,i+size));
        if(size ==10) this.gridArray10.push(data.slice(i,i+size));
        if(size ==7) this.gridArray7.push(data.slice(i,i+size));
    }
  }