HTML5 FUN 的工具不少，而目前首頁的選單，並沒有按照分類的方式來排列。之前為了在介紹 HTML5 FUN 的工具時，可以更清楚，利用 Xmind 的線上版，做了一張 SVG 格式的分類圖：
 |
| [圖1] PNG 格式的 HTML5 FUN 分類圖 |
 |
| [圖2] SVG 格式的 HTML5 FUN 分類圖 |
為什麼分類圖不直接輸出為 PNG 圖檔就好？
好問題！ [圖1] 和 [圖2] 貌似一樣，其實大不相同。按底下的連結開啟 SVG 圖檔測試：
因為 SVG 圖檔是向量式的，不但畫質好、檔案小，還可以在圖上加上超連結，而且現在大部份的網頁瀏覽器都可以直接看，不用安裝別的工具，這麼多好處，當然是選擇 SVG 圖檔。
不過這分類圖的連結，是在 HTML5 FUN 首頁右上角的一個小圖示，哈！沒有說，應該很多人都不知道吧！
 |
| [圖3] HTML5 FUN 分類圖在右上角 |
前面說到這個 SVG 圖是使用 Xmind 線上版輸出的，它的網站在：
沒有註冊雖然功能受限制，像無法存檔，就將檔案下載回來，看是存本機，還是儲存在雲端硬碟，要修改時再重新上載到 Xmind 的頁面中即可，反正我也只是要匯出為 SVG 格式的圖檔而已。
結果今天把之前存在本機的 .xmind 檔案上載，並修改後，才發現悲劇了！現在居然沒有下載為 SVG 圖檔的選項了。
 |
| [圖4] XMind 匯出 PNG 圖檔 |
為了解決這個問題，研究了大半天，網站的架構，單機的程式，都一一探了，大概只找出了一些旁門左道。得很多道程序，滿費事的。
晚上準備放棄時，突然靈機一動，想觀察一下，當我們由 Xmind 網站下載 PNG 圖檔時，是否有跟主機做了什麼互動。哈！就這麼找到下載 SVG 檔的方法了。
首先，要先打開瀏覽器的「開發人員工具」，並進入「Network」分頁。準備好後，就可以按照 Xmind 下載 PNG 檔案的程序。按左上角的「三條線」，再按「Download」中的「Image」，出現「Export to PNG」的對話框，就直接按「Export」鈕。
 |
| [圖5] 按 Export 匯出圖片 |
除了會順利的下載到 PNG 圖案；特別注意一下，「開發人員工具」的「Network」分頁中，有關鍵字「SVG」
 |
| [圖6] 注意哪裡有 SVG |
最下面的那個「SVG」按下去！
 |
| [圖7] 按帶有 SVG 的檔案，可以預覽 |
如同 [圖7] 所示，右側會顯示圖檔的預覽畫面，找到我要的目標了！接著就是準備將它擷取出來。
 |
| [圖8] 準備將 SVG 檔案開啟在新頁面 |
當我們對準類似 [圖8] 中藍底的 SVG 圖形按滑鼠的右鍵時，再按一下選單中的「Open in new tab」後，圖形即會顯示在新的頁面中；接著我們就可以對準新頁面的 SVG 圖形按滑鼠右鍵，並點選「另存新檔」，將 SVG 儲存在本機中了。
下載回來的 SVG 圖形中，除了我們自己畫的圖，Xmind 還會加上浮水印，好的！浮水印的英文是「watermark」，而下載回來的 SVG 檔案是純文字檔，這兩個線索滿好用。
當初會選用 Xmind 來畫分類圖，就是因為它簡單又美觀，最重要的是有 SVG 純文字格式的檔案，我可以利用自己寫的程式，快速地幫每個節點加上遊戲或工具的超連結。今天甚至是直接將 .xmind 檔案解壓縮(對！沒錯，它其實是 ZIP 壓縮格式)，然後可以直接修改裡面名為「content.json」的檔案內容，節點的超連結，只要加一個「href」的參數即可。
哈！久久才用一次，希望 Xmind 不會又換別的手法。
[筆記]
修改流程：
- Xmind 網站開啟本機 .xmind 檔案(未加連結者)，並修改內容。
- [Download] [Xmind File]
- 解壓縮。
- 以 xmind_parse.html 貼上 content.json 的內容，加連結，並貼回 content.json 存檔。
- 將前面解壓縮的檔案重新打包(目錄內，.xmind 檔案中，結構必須是第一層)。
- 將檔名改為 .xmind
- 檔案重新以 Xmind 網站開啟，將大小設為 100%；並依本文的方法，下載 SVG 。
- 將 SVG 去「water」。
- 以 Inkscape 開啟 SVG，版面比例設為 1，大小設為 1500 x 1200
- 加上 QRCode 和 Blogger 連結。
發表文章
沒有留言:
張貼留言