vue svg的使用

標籤：canvas   設定   載入   path   包含   同步問題   course   markdown   com   

項目要求：

　　需要把websocket推送的資料進行展示。不停地刷掉舊的資料。但是需要根據資料座標圈出來對應的車輛。

　　開始使用的是canvas進行畫圖，思路是使用absolute定位，for迴圈，在圖片同一個位置固定canvas，根據座標進行作圖。但是過程中出現很多問題，包括清空畫圖後，再次畫圖還是會疊加舊資訊。以及畫圖作圖和資料展示是分離，導致有載入先後問題。因此最後放棄了使用canvas進行標誌車輛。

　　最後決定使用svg進行作圖。

　　實現原理是：把需要的座標資訊計算出來，和車輛的基本資料存放在一個變數裡面，這樣渲染車輛的時候同時渲染標註資訊。這樣解決了不同步問題，也沒有出現資訊疊加的清空。

　　svg使用的方法如下：

　　在<svg></svg>代碼中進行畫圖，

　　　　1、矩形

　　　　　　<rect x="60" y="10" rx="10" ry="10" width="30" height="30"/> 
　　　　　　　　x– 矩形左上方x位置 
　　　　　　　　y– 矩形左上方y位置 
　　　　　　　　width–矩形寬 
　　　　　　　　height–矩形高 
　　　　　　　　rx–圓角x方向半徑 
　　　　　　　　ry–圓角y方向半徑

　　　　2、圓

　　　　　　<circle cx="25" cy="75" r="20"/> 
　　　　　　　　r–圓半徑 
　　　　　　　　cx–圓心x位置 
　　　　　　　　cy–圓心y位置

　　　　3、橢圓

　　　　　　<ellipse cx="75" cy="75" rx="20" ry="5"/> 
　　　　　　　　rx–橢圓x半徑 
　　　　　　　　ry–橢圓y半徑 
　　　　　　　　cx–橢圓中心x位置 
　　　　　　　　cy–橢圓中心y位置

　　　　4、線條

　　　　　　<line x1="10" x2="50" y1="110" y2="150"/> 
　　　　　　　　x1–起點x位置 
　　　　　　　　y1–起點y位置 
　　　　　　　　x2–終點x位置 
　　　　　　　　y2–終點y位置

　　　　5、折線 

　　　　　　<polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/> 
　　　　　　　　points–點集數列，每個數字用空白、逗號、終止命令符或者分行符號分隔開，每個點必須包含2個數字(x座標與y座標)

　　　　6、多邊形

　　　　　　<polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180"/> 
　　　　　　　　路徑繪製完後閉合圖形

　　　　7、路徑

　　　　　　<path d="M 20 230 Q 40 205, 50 230 T 90230"/> 
　　　　　　　　d–一個點集數列以及關於如何繪製路徑 
　　　　　　　　每一個命令用一個關鍵字母表示，字母M表示Move To命令，跟在命令字母后面的是所需移動點的x和y軸座標 
　　　　　　　　例如： 
　　　　　　　　　　移動到(10, 10)這個點命令，應該寫成M 10 10 
　　　　　　　　　　每一個命令都有兩種表示方式，一種是用大寫字母，表示採用絕對位置; 另一種是用小寫字母，表示採用相對定位

　　　　8、直線命令

　　　　　　5個畫直線命令 
　　　　　　M命令(實際上為移動畫筆位置命令) 
　　　　　　M x y或者m dx dy 
　　　　　　經常出現在路徑開始處，用於指明從何處開始畫 
　　　　　　L命令(Line To) 
　　　　　　L x y或者l dx dy 
　　　　　　兩個參數，分別是一個點的xz軸和y軸座標，L命令會在當前位置和之前位置(L前畫筆所在點)之間畫線段 
　　　　　　H命令 繪製水平線 
　　　　　　V命令 繪製垂直線 
　　　　　　H x或者h dx 
　　　　　　V y或者v dy

　　　　　　Z命令 閉合路徑命令 
　　　　　　Z或者z 不用區分大小寫 
　　　　　　會從當前點畫一條直線到路徑起點，雖然可能不總是需要閉合路徑，常常放到路徑的最後

　　　　9、曲線命令

　　　　　　兩種貝茲路徑：三次貝茲路徑C和二次方貝茲曲線Q 
　　　　　　三次貝茲路徑需要定義一個點和兩個控制點，使用C命令建立三次貝茲路徑，需要設定三組座標參數: 
　　　　　　C x1 y1, x2 y2, x y或者c dx1 dy1, dx2 dy2, dx dy 
　　　　　　最後一個座標(x,y)表示曲線終點，另外兩個座標是控制點，(x1,y1)是起點的控制點，(x2,y2)是終點的控制點 
　　　　　　控制點描述的是曲線起始點的斜率 
　　　　　　S命令 
　　　　　　通常情況下，一個點某一側的控制點是其另一側的控制點的對稱(以保持斜率不變) 
　　　　　　S x2 y2, x y或者s dx2 dy2, dx dy 
　　　　　　Q命令 
　　　　　　一個控制點，用來確定起點和終點的曲線斜率，兩組參數(控制點和終點座標) 
　　　　　　Q x1 y1, x y或者q dx1 dy1, dx dy 
　　　　　　T命令 
　　　　　　T x y或者t dx dy

　　　　10、弧形

　　　　　　A rx ry x-axis-rotation large-arc-flag sweep-flag x y或者a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy 
　　　　　　large-arc-flag–角度大小，決定弧線大於還是小於180°，0表示小角度弧，1表示大角度弧 
　　　　　　sweep-flag–弧線方向，0表示從起點到終點逆時針畫弧，1表示從起點到終點順時針畫弧

 

 

 

 

 

 

 

vue svg的使用