canvas 奇巧淫技（二）繪製箭頭路徑效果

前幾天有很多人問到了如何繪製高德地圖那樣的導航箭頭線效果，當時想了想並不難就先用canvas 做了，然後整合到mapbox 上，遷移到其他map lib 也只需要應用相應的地理轉螢幕座標函式。

在canvas 的應用中我們經常會遇到各種線樣式的繪製，比如虛線，漸變線，帶pattern 線（箭頭，鐵軌圖示等），或者虛線與pattern 的動畫效果。如下圖所示，總結下實現方法。

比如 ctx.setlinedash([10, 5])，就可以畫出上圖的虛線效果。發揮想象可以做出更多奇特效果。比如讓虛線動起來，有走馬燈的感覺。。

通過 createlineargradient 函式建立漸變，然後設定其漸變色段，賦值給strokestyle，漸變效果如開頭圖所示

// 建立乙個從左到右的漸變，從綠色漸變到幾乎透明，
var gradient = ctx.createlineargradient(0, 0, 600, 0);
gradient.addcolorstop(0, "rgba(0,255,100,0.9)");
gradient.addcolorstop(1, "rgba(255,255,255,0.1)");
ctx.strokestyle = gradient;

有個問題就是如果需要漸變方向符合線條走向，這是常見需求，只需要提前算下每條線的範圍和方向，建立對應的lineargradient 即可，其實類似於下面的箭頭繪製，需要反算 atan 角度一樣的。

最後這個算是綜合的應用，我寫了些canvas functions 放到了之前的canvasoverlay 裡面去用，可以方便的整合到各種支援canvas 的lib 裡面用。基本思路就是：（懶得畫圖了，思路比較簡單）

需要注意的是，atan弧度角的計算在第二三象限，會跟第一四象限混淆。比如向左下角的有向線的向量是兩個負值，但是tan 值是正的，跟第一象限一樣，所以反算的時候也會算出來小於90度的角，實際上是大於180 的角度了，需要 math.pi

大概的繪製過程，code as follow:

function generatepoints(startp, endp, stepsize = 30, ctx, anioffset = 0.5, img) 
const dist = calcdist(startp, endp);
let points = ;
const steps = dist / stepsize;
const drawimg = (px, py) => 
}// gen points by stepsize.. if
enable corner arrow, start s with (0~1) float number.
for (let s = anioffset; s <= steps; s = 1) 
// console.warn(`icon number: $`);
return points;
}

就簡單寫到這裡，整合mapbox 的demo

最近還有個問題提到比較多，關於canvas 上的圖示如何貼合地圖的傾斜，這也是個視覺上的問題。大抵上可以通過css3d 或者 canvas 的透視去做，前者應該更簡單些。有空再實踐下

canvas 奇巧淫技（二）繪製箭頭路徑效果

貪心的奇巧淫技 Join the Strings

位運算的奇巧淫技

iOS除錯奇巧淫技二之LLDB

canvas 奇巧淫技（二）繪製箭頭路徑效果

貪心的奇巧淫技 Join the Strings

位運算的奇巧淫技

iOS除錯奇巧淫技 二 之LLDB

相關推薦

iOS除錯奇巧淫技二之LLDB