作者 主题: 在線地圖工具  (阅读 46281 次)

副标题: 支援 IE 9 及同級瀏覽器, 是時候升級瀏覽器了...

离线 Sheepy

  • 純良的白色生物
  • 風紀委
  • *
  • 帖子数: 14124
  • 苹果币: 2
在線地圖工具
« 于: 2009-03-22, 周日 11:11:51 »
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) 再手動修改是目前最簡單的方法。

同步:
 * 按顏色旁邊的雙箭頭會列出地圖,載入後會跟伺服器自動同步。
 * 地圖清單上方的共享鍵可以進入共享設定,地圖將出現在列表上。
 * 分享後,要同步地圖請按一下共享鍵。作出繪畫後共享鍵會帶紅框,提示需要更新。觀眾的地圖在幾秒後會刷新。
« 上次编辑: 2015-07-02, 周四 00:30:25 由 Sheepy »
(10:23:05 PM) 欧剃: 咩的笑话一般不仅冷,而且是黑漆漆的阴冷?
(10:23:11 PM) 布布: 这只是,对别人来说是掉SAN值的腹黑,对咩来说仅仅是笑话而已
(10:23:45 PM) ***Sheepy 聳肩, 一笑置之
(10:24:17 PM) ***布布 死了
  D&D 4e 歿土英豪 頭兩章試譯

离线 聪明伶俐琪露诺

  • 侵略!バガ娘!
  • Goddess
  • ********
  • 帖子数: 7002
  • 苹果币: 0
在線地圖工具
« 回帖 #1 于: 2009-03-22, 周日 17:40:55 »
/me 看到了坑

离线 Sheepy

  • 純良的白色生物
  • 風紀委
  • *
  • 帖子数: 14124
  • 苹果币: 2
在線地圖工具
« 回帖 #2 于: 2009-03-22, 周日 19:39:43 »
嗯. 那只是正常的戰場地形, 不是嗎? :em001


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


所有瀏覽器的顯示模式都非常接近, 包括 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 依然是最好的開發除錯器, 但其他瀏覽器的內建工具也足以輕鬆進行除錯, 比起以前瞎子摸象實在是另一個世界.
« 上次编辑: 2012-08-22, 周三 15:34:47 由 Sheepy »
(10:23:05 PM) 欧剃: 咩的笑话一般不仅冷,而且是黑漆漆的阴冷?
(10:23:11 PM) 布布: 这只是,对别人来说是掉SAN值的腹黑,对咩来说仅仅是笑话而已
(10:23:45 PM) ***Sheepy 聳肩, 一笑置之
(10:24:17 PM) ***布布 死了
  D&D 4e 歿土英豪 頭兩章試譯

离线 Sheepy

  • 純良的白色生物
  • 風紀委
  • *
  • 帖子数: 14124
  • 苹果币: 2
在線地圖工具
« 回帖 #3 于: 2009-03-23, 周一 07:26:39 »
加入了選取範圍的拖拉, 雙按選取同字區域, 背景改用全形空格. 雖然工作效率未逹到最好但已經可以不錯地使用. 找天要錄制一段示範片段... 快速上手見頂帖.

目前的限制主要是單繪圖工具及單層, 日後將會在不影響這簡便性的前提下進行擴充.
(10:23:05 PM) 欧剃: 咩的笑话一般不仅冷,而且是黑漆漆的阴冷?
(10:23:11 PM) 布布: 这只是,对别人来说是掉SAN值的腹黑,对咩来说仅仅是笑话而已
(10:23:45 PM) ***Sheepy 聳肩, 一笑置之
(10:24:17 PM) ***布布 死了
  D&D 4e 歿土英豪 頭兩章試譯

离线

  • Global Moderator
  • *
  • 帖子数: 6729
  • 苹果币: 5
  • 夜空中的闪烁
    • STAR的实验室
在線地圖工具
« 回帖 #4 于: 2009-03-23, 周一 08:20:28 »
咩姐姐最贤惠!
/me 去试用羊姐推荐的威酷敞篷车

离线 zongzi

  • Knight
  • ***
  • 帖子数: 558
  • 苹果币: -5
  • qq492607291
    • 几个小工具
在線地圖工具
« 回帖 #5 于: 2009-03-25, 周三 00:24:08 »
好强悍啊!

制作出这么厉害的页面!

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

离线 Sheepy

  • 純良的白色生物
  • 風紀委
  • *
  • 帖子数: 14124
  • 苹果币: 2
在線地圖工具
« 回帖 #6 于: 2009-03-25, 周三 14:05:26 »
嗯, 看了一下, 應該很快能實現客戶端的長期儲存及讀取 - 不過只支援 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 輪出, 可以做地圖貼論壇
- 方向鍵可以移動選取區域, 方便輸入參戰角色.
« 上次编辑: 2009-03-26, 周四 00:35:32 由 Sheepy »
(10:23:05 PM) 欧剃: 咩的笑话一般不仅冷,而且是黑漆漆的阴冷?
(10:23:11 PM) 布布: 这只是,对别人来说是掉SAN值的腹黑,对咩来说仅仅是笑话而已
(10:23:45 PM) ***Sheepy 聳肩, 一笑置之
(10:24:17 PM) ***布布 死了
  D&D 4e 歿土英豪 頭兩章試譯

离线 zongzi

  • Knight
  • ***
  • 帖子数: 558
  • 苹果币: -5
  • qq492607291
    • 几个小工具
在線地圖工具
« 回帖 #7 于: 2009-03-26, 周四 11:48:20 »
我前面提出的,就是希望能方便存储和再现。
当然,我说的key方式是需要占用服务器空间的,而且如果需要占用服务器空间,将不可避免的牵涉到用户登录等附加的限制。

 

离线 Sheepy

  • 純良的白色生物
  • 風紀委
  • *
  • 帖子数: 14124
  • 苹果币: 2
在線地圖工具
« 回帖 #8 于: 2009-03-26, 周四 12:06:53 »
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.
« 上次编辑: 2009-03-26, 周四 12:33:51 由 Sheepy »
(10:23:05 PM) 欧剃: 咩的笑话一般不仅冷,而且是黑漆漆的阴冷?
(10:23:11 PM) 布布: 这只是,对别人来说是掉SAN值的腹黑,对咩来说仅仅是笑话而已
(10:23:45 PM) ***Sheepy 聳肩, 一笑置之
(10:24:17 PM) ***布布 死了
  D&D 4e 歿土英豪 頭兩章試譯

离线 blues

  • Peasant
  • 帖子数: 21
  • 苹果币: 0
在線地圖工具
« 回帖 #9 于: 2009-03-27, 周五 19:41:52 »
这个真不错,用opera的飘过~

恩恩,layers和undo比较期待
得不到的,因为其抽象,所以要毁灭
毁灭是为了重生
重生是为了美丽

离线 水银

  • Diver
  • ******
  • 帖子数: 2837
  • 苹果币: 0
在線地圖工具
« 回帖 #10 于: 2009-03-27, 周五 19:56:28 »
想把图保存的话其实只要加个逆转换的功能就好了,导入文本之类,不知道会不会比较方便

离线 AlbertNi

  • Sleeper, Lord of Helpless, The Brainless
  • Goddess
  • ********
  • 帖子数: 7260
  • 苹果币: 2
在線地圖工具
« 回帖 #11 于: 2009-03-27, 周五 21:51:10 »
姐姐!
/me 报告bug,效果图见附件,irc格式输出结果如下:
代码: [选择]
1,00           
1,00           
1,00  那啥这个好像是个虫子对吧   
1,00  咩!姐姐改一下?   
1,00           
那个文本框自己输入的时候只限定了两个字符,而不是两个半角或一个全角,于是会出bug,至少排版的时候会错位。而且在web界面里,多出的一个标点还不是下拉一行显示的……比如第二行的“咩!”和“下?”
« 上次编辑: 2009-03-27, 周五 22:03:22 由 AlbertNi »
突然之间不知道放神马签名好了……
哦对了,我也是新人了!

离线 Sheepy

  • 純良的白色生物
  • 風紀委
  • *
  • 帖子数: 14124
  • 苹果币: 2
在線地圖工具
« 回帖 #12 于: 2009-03-28, 周六 07:23:17 »
感謝試用. 已知, 優先度不高. 標點下拉可以看看...

JavaScript 唯一判斷全型/半型的可靠方法是做兩個參考用的偽隱藏文字然後拿問題文字比對像素闊度. 實際效果還會受己安裝字型和預設字型等影響, 我沒信心很快試好, 所以就不做了. 畢竟這不是需要小心避免的事, 本來做甚麼 IRC 地圖都會直覺只打一個字吧...
« 上次编辑: 2009-03-28, 周六 11:50:06 由 Sheepy »
(10:23:05 PM) 欧剃: 咩的笑话一般不仅冷,而且是黑漆漆的阴冷?
(10:23:11 PM) 布布: 这只是,对别人来说是掉SAN值的腹黑,对咩来说仅仅是笑话而已
(10:23:45 PM) ***Sheepy 聳肩, 一笑置之
(10:24:17 PM) ***布布 死了
  D&D 4e 歿土英豪 頭兩章試譯

离线 AlbertNi

  • Sleeper, Lord of Helpless, The Brainless
  • Goddess
  • ********
  • 帖子数: 7260
  • 苹果币: 2
在線地圖工具
« 回帖 #13 于: 2009-03-28, 周六 10:03:36 »
不是说防止误操作的最好方法就是禁止误操作么XD当然如果判定有难度的话确实不值得优先考虑这个
突然之间不知道放神马签名好了……
哦对了,我也是新人了!

离线 BCatYan

  • Knight
  • ***
  • 帖子数: 382
  • 苹果币: 0
在線地圖工具
« 回帖 #14 于: 2009-03-28, 周六 16:41:47 »
好东西啊,这次跑团用用试试

支持羊姐姐