手機版
你好,游客 登錄 注冊
背景:
閱讀新聞

使用SVG繪制流程圖

[日期:2019-11-07] 來源:Linux社區  作者:webhmy [字體: ]

本篇主要記錄流程圖的實現過程中的難點和核心技術點,先上效果圖:

節點可以任意拖拽,曲線跟隨變化

正在連接的線

1、節點實現

流程圖是基于SVG繪制的,節點主要利用 gforeignObject的特性來實現:

   <g  >
        <foreignObject width="180" height="50">
          <body xmlns="http://www.w3.org/1999/xhtml">
            <div  >
              <span ></span>
              <span  :title="item.name">{{item.name}}</span>             
              <!-- 節點進 -->
              <div  >
                ......
              </div>
              <!-- 節點出 -->
              <div >
                ......
              </div>
            </div>
          </body>
        </foreignObject>
    </g>
  • g元素:特性是可以包裹元素,并進行位置變化,這樣拖拽的時候獲取對應的坐標改變 transform 的值就可以整體移動了;
  • foreignObject標簽:借助<foreignObject>標簽,可以直接在SVG內部嵌入XHTML元素,尤其一些需要css進行控制的樣式類,但是這個兼容性較差,主要是IE瀏覽器。

2、曲線的繪制

核心代碼:

   <g >
      <path  :d="`M ${pos.startS} Q ${pos.curveS}  T ${pos.endS}`"></path>
      <path
        
        d="M 5 0 L 0 3.6327126400268037 L 5 7.265425280053607 Z"
        :transform="`translate(${item.endPosX - 4},${item.endPosY + 4}) scale(1,1) rotate(-90)`"
      ></path>
    </g>

這里使用的是svg中的path中的M Q T

  • Mmoveto 這里是初始節點的底部連接點
  • Qquadratic Bézier curve 二次貝塞爾曲線
    【截圖源于網絡】
  • Tsmooth quadratic Bézier curveto 二次貝塞爾曲線平滑延伸
    【截圖源于網絡】

這里的T指的是通過一個控制點推斷出一個新的控制點,T前面必須是一個Q命令或者是另一個T命令

由此可見,只要確認三個點(起點,控制點,終點),就可以繪制出平滑好看的曲線啦~

/**
* startPosX 起節點的左上角x
* endPosX  終節點的左上角x
* sizeX 節點的一半寬度 sizeY 是節點的高度
/
// 起始點
 let startS = `${startPosX + sizeX} ${startPosY + sizeY}`;

// 二次貝爾曲線
 let curveS = `${startPosX + sizeX} ${startPosY + sizeY + 40} ${
    this.endNode
    ? (startPosX + endPosX+ 2 * sizeX) / 2
     : (startPosX + endPosX+ sizeX) / 2
 } ${(startPosY + endPosY + 20) / 2}`;

// 終點
let endS = `${this.endNode ? endPosX + sizeX : endPosX}  ${endPosY}`;

至于節點的拖拽就比較簡單了,點擊移動的時候獲取位置信息更transformtranslate屬性即可。

Linux公社的RSS地址http://www.nluszu.live/rssFeed.aspx

本文永久更新鏈接地址http://www.nluszu.live/Linux/2019-11/161294.htm

linux
相關資訊       SVG繪制流程圖  流程圖 
本文評論   查看全部評論 (0)
表情: 表情 姓名: 字數

       

評論聲明
  • 尊重網上道德,遵守中華人民共和國的各項有關法律法規
  • 承擔一切因您的行為而直接或間接導致的民事或刑事法律責任
  • 本站管理人員有權保留或刪除其管轄留言中的任意內容
  • 本站有權在網站內轉載或引用您的評論
  • 參與本評論即表明您已經閱讀并接受上述條款
彩票投注骗局