在線地圖工具

[Sheepy]

http://www.goddessfantasy.net/~sheepy/arena/
或者 從座標+格子的地圖 開始

支援 Internet Explorer 9+，Firefox 3.6+，Safari 5+，Opera 10+，Chrome 6+


特點: 即開即用，有即時同步共享，有遮罩有圖層，預設常用文字和符號
源碼: GitHub


快速上手:

1. IE 及 Safari 用戶請先確認瀏覽器版本足夠新 (IE 9 / Safari 5)。
2. 開啓後如無意外會出現一塊白色地圖，上面是狀態列，左面是工具列。
3. 工具箱中間有一行是文字工具，色刷工具，和像皮擦工具。
4. 色刷工具是一支畫筆，可以給地圖填入底色，顏色在工具箱選擇。
5. 文字工具選取後可以按 Enter 輸入一個中文字或一兩個英文字，然後像畫筆一樣用。
6. 移動工具可以搬動同一片文字。
7. 畫錯了用復原或者像皮擦工具修正。
8. 上色和繪畫文字之前都可以先選擇圖層。例如分層畫背景，威能效果，角色，移動角色以及加入/清除效果時就不用重繪原本蓋住的地圖。
9. 繪圖完成後按上面中央的磁片可以進行帶色彩的 mIRC 輸出或其他格式的輸出。mIRC/BBCode/純文字等輸出需要拖拉選擇範圍，選擇好後雙按區域或者按 Enter 可以完成輸出。

提示: 如果繪畫沒有生效，請點選深灰色背景取消遮罩，並確認繪畫的地方沒有被其他圖層蓋住。

進階使用:

 * 遮罩: 遮罩可以限制繪畫的範圍。按著 Ctrl 可以選擇多片範圍，按著 Shift 可以減去範圍。
 * 在地圖上雙按會選取這片文字相同的區域。三選取全地圖的同文字區域。
 * 拖拉遮罩範圍可以移動區域，按 Ctrl 會變成複制區域。
 * 上下左右方向鍵可以移動選取區域。
 * 選取區域時按著 Ctrl+Shift 的話會變成 XOR 選取效果。
 * 操作時按 Esc 可以取消操作。按地圖外的灰色區域可以取消選取。
 * Ctrl+顏色會設定遮罩範圍的文字顏色，Shift+顏色設定遮罩範圍的背景色。
 * 雙按遮罩鍵會選取目前圖層的已繪範圍，或者把目前遮罩減半(網點效果)。後者可以輕易做出灰白相間的地圖或地型。

圖層:
 * 雙按圖層可以隱藏/顯示圖層。
 * 目前不能修改圖層名稱或地圖大小。輸出至 json (plain) 再手動修改是目前最簡單的方法。

同步:
 * 按顏色旁邊的雙箭頭會列出地圖，載入後會跟伺服器自動同步。
 * 地圖清單上方的共享鍵可以進入共享設定，地圖將出現在列表上。
 * 分享後，要同步地圖請按一下共享鍵。作出繪畫後共享鍵會帶紅框，提示需要更新。觀眾的地圖在幾秒後會刷新。

[聪明伶俐琪露诺]

/me 看到了坑

[Sheepy]

嗯. 那只是正常的戰場地形, 不是嗎?


順便也提一下關於瀏覽器的發現:


所有瀏覽器的顯示模式都非常接近, 包括 IE 8, 對開發有非常大的幫助, 只有 Safari 和 Chrome 有一點小問題. 有趣的是它們一個是最漂的, 一個是最快的. 大家的速度都不錯, 比舊一代的瀏覽器 (IE 6/7, Fx 2, Op 7/8) 有非常明顯的改進. 世界在變.

IE 8 的 JavaScript 還是有比較多不標準的地方, 但都不難解決. 執行效能依然是最差的, 差距頗大, 但尚可. CSS 效果支援也是最少的, 幸沒有大影響, 最重要是很標準. 試過進入 IE 7 相容模式看, 死得非常慘烈.

Firefox 3 的表現中規中矩, 執行速度理想. 就經驗來看, 它不幸地也是最不穩定的, 既沒有獨立分頁程序, 長期穩定性也不比 Opera, 但誰能比上它的擴展? 3.1 的速度有大幅提升, 也許可以跟 Chrome 一較高下.

Opera 9 是眾多瀏覽器中給我最少麻煩的, 很驚訝, 因為它以前的編程支援很差. 到目前為止只遇上雙擊限制的問題. 執行速度比 Firefox 慢點, 但比 IE 快, 不錯. 另外, 是比較漂亮的瀏覽器, 例如工具列的文字有陰影.

Safari 4 一打開只能用 Wow 去形容. 上一版它給我很壞的第一印像, 但這新版很酷. 非常酷. 非常漂亮, 是五個當中的藝術品. 我強烈推薦喜歡漂亮東西和簡潔東西的人試用 Safari 4. 執行速度不錯,  跟 Firefox 差不多, 但載入速度很快.

Google Chrome 1 只試了一次, 當其他四個的顯示都沒問題的時候只有它有事, 功能也不能完全實現. 可是, 執行速度非常快. 非常. 它輕易穩拿最快瀏覽器的寶座. 如果 Safari 是威酷的開篷車, Chrome 是狂飆的法拉利.



基本上,  開發完全是在 Firefox 進行的. 但上列瀏覽器全部都有非常良好的除錯器, 全都包括 DOM explorer (檢視頁面結構和 CSS 特性), Script debugger (檢查問題發生事的狀況), JavaScript console (即時執行 JS 以進行除錯). Firebug 依然是最好的開發除錯器, 但其他瀏覽器的內建工具也足以輕鬆進行除錯, 比起以前瞎子摸象實在是另一個世界.

[Sheepy]

加入了選取範圍的拖拉, 雙按選取同字區域, 背景改用全形空格. 雖然工作效率未逹到最好但已經可以不錯地使用. 找天要錄制一段示範片段... 快速上手見頂帖.

目前的限制主要是單繪圖工具及單層, 日後將會在不影響這簡便性的前提下進行擴充.

[星]

咩姐姐最贤惠！
/me 去试用羊姐推荐的威酷敞篷车

[zongzi]

好强悍啊！

制作出这么厉害的页面！

不知道是否能再出个这样的功能：
1，把图保存（关联到一个key）
2，显示保存过的图（输入key，或者URL上面加上key）

[Sheepy]

嗯, 看了一下, 應該很快能實現客戶端的長期儲存及讀取 - 不過只支援 Firefox & IE, 因為 Opera/Webkit 沒有 HTML 5 dom storage.

key 比較難搞. 預設的地圖大小目前是 900 格, 如果不用力壓縮的話很容易就生出數千字節的 key.
舊 IE 限制 url 長度在 2K, Apache 限制在 4K (再長就 error 413), 而 dom storage 是以 MB 計的空間, 目前是 5Mb (Fx) / 10MB (IE).
另外, 雖然目前是經 php 运作, 但其實也可以完全離線獨立运行, 預料好一段時間都不會實作伺服器端的任何功能.

不過 dom storage 可以做得像普通軟件一樣彈出(假的)儲存/讀取窗口, 使用上會比 key 方便.


簡單點說, 是可以期待快將實現的功能.


新增功能
-  BBCode 輪出, 可以做地圖貼論壇
- 方向鍵可以移動選取區域, 方便輸入參戰角色.

[zongzi]

我前面提出的，就是希望能方便存储和再现。
当然，我说的key方式是需要占用服务器空间的，而且如果需要占用服务器空间，将不可避免的牵涉到用户登录等附加的限制。

 

[Sheepy]

Yes. Well, personally, I'd like something more robust.
Something that'll work even when Ellesime is history, for example.
Something that'll work even when database is down, even when offline.
Not that I expect it to go down, but then life is unpredictable.

It's possible to preserve whole map state in a key so that server is not needed, but I don't think it's feasible as stated.

Anyway, I'm expecting save/load to be done in four or five days.
S/L is easy, but I'd like to do save-file affecting changes first. Like layers or undo.
Hell, this whole map thing is easier then I thought... practice make perfect, I guess.

Added html export.

[blues]

这个真不错，用opera的飘过～

恩恩，layers和undo比较期待