免费人成动漫在线播放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

反饋

用戶
反饋

主站蜘蛛池模板: 天天曰天天爽 | 中文字幕一区中文亚洲 | 欧美性极品hd高清视频 | 精品福利一区 | 日韩成人综合网 | 亚洲成在人色婷婷 | 毛片免费视频网站 | 日韩精品一区二三区中文 | 夜间福利在线观看 | 国产福利微拍精品一区二区 | 国产成人a一区二区 | 91免费精品视频 | 最近高清中文字幕2019 | 日韩精品视频网站 | cao美女视频网站在线观看 | 精品国产日韩亚洲一区二区 | 中文亚洲动漫精品 | 91久久偷偷做嫩草影院免 | 国产精品免费aⅴ片在线观看 | 国产亚洲欧美在线视频 | 国产乱人乱精一区二区视频密 | 翁熄系列乱老扒小雪小说 | 成人影视在线 | 日本黄a | 日韩在线www | 最近中文字幕无吗 | 国产精品久久久久久搜索 | 夜色爽爽| 欧美另类丰满熟扫乱xxxxx | 欧美第一精品 | 成人短视频免费 | 欧美亚洲国产另类 | yiren22亚洲综合高清一区 | 日韩中文字幕在线观看视频 | 久久亚洲欧美成人精品 | 男女免费爽爽爽在线视频 | 欧美午夜视频 | 日韩午夜免费视频 | jizzjizz老师太多水日本 | 丝袜三级 | 中文丝袜|