http://tw.piliapp.com/mrt-taiwan/taipei/
看到台北捷運地圖的 android app 被下架，原因是因為該 app 裡頭使用了台北捷運官網的地圖。
因為我也有用，覺得自己也在劫難逃，最好的解法就是自己畫！
那... 怎麼畫？我只會使用小畫家耶！
我是個沒藝術感的工程師，並不會photoshop等是什麼很貴的軟體。
因為之前有使用 html5 + css3 來製作 icon 的經驗，所以..
- 最好的製圖平台就在眼前：Google Chrome
- 最好的製圖工具就是 javascript
在此分享一下我怎麼做的。
為了避免侵權，所以我一開始就決定，不參考現有的捷運地圖，一切由「地圖」開始。- 先到 Google Map 上，把地圖存下來，用了兩次 print screen，再用小畫家合併
- 把捷運站先用大紅點標出來
- 再把路線畫出來
- 最終結果是要用來畫一個路線示意圖
接下來用紙筆畫出示意圖，先思考幾個重點：
- 地理位置其實不太重要 (東門站其實繞了一大圈)
- 圖不能太大也很重要，必要時更改路線走向 (不然旁邊怎麼放廣告)
- 示意盡量簡單，能變直線就變直線，盡可能以 90 度或45度為單位
- 每一條線不能太近，不然標不上字
 |
| 其實圖總共畫了第三次的版本。黑圈表示要轉變的站，線上的數字表示走了幾個站。(這個版本後來有補畫到動物園) |
好，要開始用 javascript 畫，方法其實很直覺。先回顧剛剛怎麼用「筆」來畫的：
- 我從台北車站開始畫一個●
- 往東邊畫兩個站的距離到忠孝新生
- 再往東畫八個站到南港展覽館
- 再來往北向柵湖線畫，繞了一圈...
- 畫到南京東路站的時候，發現直接「連到」忠孝復興站即可。
功能都出來啦！我需要一隻像筆一樣的javascript class
- class name DrawRouteMap
- methods:
- site(x, y) //畫啟始站，或單一個站。回傳 站的 id (只是一個編號)
- line(site_id, angle, distance, num) // 從台北車站往右畫兩個站的距離，要把路線畫出來。參數分別是：啟始車站 ID，路線往哪個方向，一站的距離多少，走幾個站
- link(site_id_1, site_id_2) // 連結兩個站的路線
- set_line_style(...) // 在畫路徑的時候，要用什麼顏色
- set_site_style(...) // 在畫車站的時候，要用什麼顏色
整個過程加上哩哩摳摳的東西花了快一個工作天(所以成本是？)，Library建好後，再去畫高雄捷運也需要個半天的時間。成品如下：
