創(chuàng)建動態(tài)面板的 window

http://wiki.jikexueyuan.com/project/axure/images/draggablemap1.png" alt="image" />

首先打開AxureDraggableMap.rp 然后打開 Draggable Map。

因為我們不想讓整個地圖顯示在顯示屏上,我們將創(chuàng)建一個類似 window 的部件，這個部件給了我們一個可以查看部分地圖的視圖。要做到這一點,在設計區(qū)域選擇谷歌地圖,右鍵單擊并選擇轉(zhuǎn)換為動態(tài)面板。

將其標記為 MapWindow。

調(diào)整 MapWindow 面板

http://wiki.jikexueyuan.com/project/axure/images/draggablemap2.png" alt="image" />

接下來,重新定位 MapWindow 面板到灰色的長方形頂部。調(diào)整矩形內(nèi)的面板,看起來像上邊的圖像。

重新定位地圖面板內(nèi)的狀態(tài)

http://wiki.jikexueyuan.com/project/axure/images/draggablemap3.png" alt="image" />

我們想要紅色的地圖圖像中標記在地圖的中間,讓我們重新定位 MapWindow 面板內(nèi)的地圖狀態(tài)。

打開 MapWindow 面板的 State1。復位地圖位置，讓紅色的地圖標記大概在動態(tài)面板的中間。部分地圖可能會超出邊框，但這沒關系。

返回 Draggable Map 頁面然后檢查線框是否在你想要的地方。

將地圖裝換為動態(tài)面板

http://wiki.jikexueyuan.com/project/axure/images/draggablemap4.png" alt="image" />

現(xiàn)在我們?yōu)榈貓D創(chuàng)建一個窗口，讓其可以被拖拽。為了做到這些，我們將地圖裝換為動態(tài)面板。再次打開 MapWindow 的 State1，右鍵單擊圖片然后選中 Convert to Dynamic Panel 選項創(chuàng)建另一個動態(tài)面板。

編輯這個面板為 MapContent。你現(xiàn)在會注意到這個面板嵌套在 MapWindow 中。

添加 drag 動作

http://wiki.jikexueyuan.com/project/axure/images/draggablemap5.png" alt="image" />

在 MapWindow 面板中，添加一個事例到 OnDrag 事件中去。在動作菜單中，選中 Move 然后指定到 MapContent 面板。一般地，現(xiàn)在可以拖動面板了。點擊 OK 關閉事例編輯器。

添加交互來重置地圖

http://wiki.jikexueyuan.com/project/axure/images/draggablemap6.png" alt="image" />

返回 Draggable Map 頁面。選中 Reset Map 鏈接，然后通過動作 Move MapContent to (-530, -135) 添加一個 OnClick 事例，大概是原來的位置。

然后這就是原型了，測試它吧。