免费人成动漫在线播放r18-免费人成观看在线网-免费人成黄页在线观看日本-免费人成激情视频在线观看冫-jlzzjlzz亚洲大全-jlzzjlzz亚洲日本

二維碼
企資網

掃一掃關注

當前位置: 首頁 » 企資頭條 » 專題 » 正文

Axure教程——拖拉拽移動地為什么

放大字體  縮小字體 發布日期:2023-03-11 13:56:19    作者:付麗芳    瀏覽次數:51
導讀

編輯導語:地圖是可視化原型中常用的元件,本文作者分享了有關托拉拽移動地圖的Axure教程,從基本材料的準備、交互的設置展開分析,一起來學習一下吧,希望對你有幫助。在可視化的原型中,地圖是常用的元件,所以今

編輯導語:地圖是可視化原型中常用的元件,本文作者分享了有關托拉拽移動地圖的Axure教程,從基本材料的準備、交互的設置展開分析,一起來學習一下吧,希望對你有幫助。

在可視化的原型中,地圖是常用的元件,所以今天作者就教大家如何制作拖拉拽移動地圖的原型模板。

一般而言,大部分人都是直接調用像高德地圖、百度地圖的圖表,這種方式的缺點是要聯網,而且修改時需要懂一點代碼,而且地圖都是由別人提供的,不能用自己的地圖素材,例如園區詳細地圖、或者商場內部地圖就不是很適用了。所以今天我就教大家如何在不調用外部地圖的情況下制作托拉佐移動地圖的效果。

制作完成之應具備以下交互效果:

鼠標拖動地圖,可以查看各個方向的詳情; 模板制作完成之后,只需要導入地圖素材,即可自動生成交互效果。

原型地址:https://kup328.axshare.com/#g=1

一、基本材料的準備

這個原型我們只需要用到兩個元件,一個是圖片元件,另外一個是動態面板。

我們把事前的圖片導入圖片元件,這里需要注意的是圖片要上傳原圖,最好是大一點的,如果太小的話也沒有移動的空間。案例中的圖片尺寸為2666*1500。

動態面板要取消勾選自適應內容,尺寸要比圖片小,案例中為900*507。

我們把圖片移入動態面板后,要設置初始的位置,這里最好是中間那一塊地圖剛好在動態面板顯示的區域,案例中圖片的坐標為-883,-497。

這里有個快速的方式,可以新建一個矩形和動態面板的大小一致,然后放在0,0的位置,先選中矩形,在選中圖片,點擊左右居中和上下居中,這樣就可以快速到達對應位置。

二、交互的設置

交互我們寫在動態面板拖動時,我們用移動的事件,選著跟隨鼠標拖動。

這樣設置以后,我們在拖動鼠標時,圖片就可以跟隨鼠標移動了,又因為動態面板的尺寸和位置都是固定的,所以實現了拖動鼠標就可以查看不同位置的詳情的效果了。

但是這里還存在一個問題,就是因為圖片不是無限大的,如果我們一直向一個方向拖動,就會導致圖片已經看完,出現空白的情況。所以在移動事件里,我們要給拖動的方位增加一個邊界:

左邊界和上邊界是最簡單的,都是小于等于0,這里很容易理解,假設圖片的x坐標是10,那么0-10的位置就是空白的,所以上邊界的坐標是小于等于0,左邊界也是一樣。

那右邊邊界其實就是圖片的右邊界和動態面板的寬重疊的位置,案例中動態面板的寬為900,所以右邊界要大于或等于900,這里初學者可以直接填寫900。

但是建議大家直接寫函數,因為如果寫數字,后續修改的過程中你改變了動態面板的尺寸,那你還需要回來改交互,如果用width函數,就自動和動態面板的寬掛鉤,就算修改了尺寸也不用回去改交互,復用性會大大增加。

同樣道理,底部邊界其實就是圖片的底邊和動態面板高度重疊的位置,案例中動態面板高是507,所以底部邊界要大于或等于507,同樣建議大家用height函數。

這樣我們就完成拖拉拽移動地圖模板的制作了,以后使用時只需要在圖片元件里導入地圖的素材,移動一個位置和大小,即可自動生成拖拉拽移動查看的交互效果,是不是很方便呢。

那以上就是拖拉拽移動地圖原型模板制作教前的全部內容了,感謝您的閱讀,我們下期見。

本文由 @Axure高保真原型 原創發布于人人都是產品經理,未經許可,禁止轉載。

題圖來自 Unsplash,基于 CC0 協議。

 
(文/付麗芳)
打賞
免責聲明
本文為付麗芳推薦作品?作者: 付麗芳。歡迎轉載,轉載請注明原文出處:http://m.bangpiao.com.cn/news/show-326274.html 。本文僅代表作者個人觀點,本站未對其內容進行核實,請讀者僅做參考,如若文中涉及有違公德、觸犯法律的內容,一經發現,立即刪除,作者需自行承擔相應責任。涉及到版權或其他問題,請及時聯系我們郵件:weilaitui@qq.com。
 

Copyright ? 2016 - 2023 - 企資網 48903.COM All Rights Reserved 粵公網安備 44030702000589號

粵ICP備16078936號

微信

關注
微信

微信二維碼

WAP二維碼

客服

聯系
客服

聯系客服:

在線QQ: 303377504

客服電話: 020-82301567

E_mail郵箱: weilaitui@qq.com

微信公眾號: weishitui

客服001 客服002 客服003

工作時間:

周一至周五: 09:00 - 18:00

反饋

用戶
反饋

主站蜘蛛池模板: 欧美人成网站在线看 | 超级乱淫视频播放日韩 | 福利免费在线 | 最近的2019免费中文字幕 | 717影院理论午夜伦不卡久久 | 日本xx13一18处交高清 | 不卡一区在线观看 | 无毒不卡在线播放 | 午夜黄色一级片 | 午夜剧场在线免费观看 | 性欧美videos另类视频 | 男男羞羞视频网站免费 | 国产欧美一区二区成人影院 | 久久99精品一级毛片 | 欧美三级不卡视频 | 免费观看黄色a一级录像 | 国产精品香蕉成人网在线观看 | 欧美一级高清片免费一级 | 久久精品最新免费国产成人 | 免费一级视频在线播放 | www视频网站| 最新亚洲情黄在线网站无广告 | 蜜桃五月天| 黄色在线看网站 | 欧美成人精品手机在线观看 | 亚洲人体在线 | 日本全黄三级在线观看 | 狠狠操天天爱 | 无遮挡免费视频 | 男人透女人超爽视频免费 | 成人欧美视频免费看黄黄 | a级片视频在线观看 | 五月激情六月丁香 | 欧美日韩在线观看一区二区 | 亚洲综合色网站 | 日韩欧美精品 | 日韩视频在线观看一区 | 成人网18免费看 | 一级做a爱片就在线看 | 手机看片a永久免费看大片 手机看片91精品一区 | 免费观看黄色a一级录像 |