大家好，我是老朋友，易學前端筆記，今天給大家分享如何用HTML5技術繪製一個上海地鐵線路
以下是2012年的地鐵線路，開始更新，希望本次內容可以幫助到正在學習HTML5的小夥伴
如果你覺得本文對你有所幫助，歡迎關注和分享，幫助到更多學習前端的小夥伴！
示例講解
首先需要解決數據問題，可以從維基百科或者上海地鐵官網中獲取，不過也免不了人工，要達到良好的顯示效果，需要不只要記錄站點的位置，還需要設置文本標籤的理想位置，有時為了避免文字疊加，需要設置旋轉角度……總之事在人為，想想辦法，最終解決了數據問題，再加上Qunee圖形組件的強大展示效果，做出來可以交互的在線地鐵圖
web前端學習群：49 80 48 138 （進群 小編 贈 送 100G前端系統學習資料哦~）
數據格式
採用JSON格式數據，分三種類型：文本標籤、站點、地鐵線
總的結構如下：
文本標籤數據
包含座標和文字信息，
文字與節點旋轉效果
創建圖元
數據需要轉換成qunee圖元對象，三種類型分別對應三個創建函數
創建文本標籤
創建站點
創建地鐵線
createLine(…)函數用於創建地鐵線，使用了節點類型圖元，並設置節點主體為路徑，函數updateLine(…)用於從站點信息自動生成線路路徑
本段代碼可能比較長，如果覺得本文不錯，你可以收藏哦~
交互處理
增加交互處理，監聽站點拖動事件，保持地鐵路線跟隨站點位置變化
好了，今天的內容就分享到這裡，如果覺得本文對你有幫助歡迎關注和轉發
也希望本文可以幫助到更多正在學習web前端的小夥伴！！！
分享到:
閱讀更多 易學前端筆記 的文章
