中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

本篇文章為大家介紹了如何利用Axure打造“指示線跟隨地圖所選區(qū)域，并展示相應(yīng)數(shù)據(jù)可視化”的效果，其中需要做到的函數(shù)計算為重難點(diǎn)。

知識重點(diǎn)難點(diǎn)

• 直角三角形斜邊長度與斜邊角度計算；
• 進(jìn)度條制作。

元件準(zhǔn)備

地圖“map”

• 鋼筆勾出地圖各板塊形狀，并分別命名；
• 為各形狀設(shè)置Interaction Styles，主要是MouserOver與Selected；
• 選擇所有形狀Selection Group。

跟隨線“map-line”

• 鋼筆勾出一條曲線，命名為“map-line”，確保其起點(diǎn)與終點(diǎn)水平；
• 添加一個小小的圓形，命名為“P”，放置與曲線終點(diǎn)處。

動態(tài)面板“可視化數(shù)據(jù)面板”

• 添加一動態(tài)面板命名“可視化數(shù)據(jù)面板”，配置兩個狀態(tài)“1”、“0”，初始狀態(tài)為1；
• 狀態(tài) 1 中添加數(shù)據(jù)完成時的樣式內(nèi)容；
• 狀態(tài) 0 中添加數(shù)據(jù)加載過程中的樣式內(nèi)容。

比例進(jìn)度條“可視化x”

這里做的是小于50%的比例樣式，添加圓或扇形如下圖，每個“可視化x”均為一個動態(tài)面板，初始隱藏狀態(tài)。

看到結(jié)構(gòu)就應(yīng)該知道，其實(shí)就是角度改變的做法，后面我就不詳細(xì)講了。

效果實(shí)現(xiàn)

主要事件與邏輯關(guān)系

實(shí)現(xiàn)難點(diǎn)：跟隨線指向所選點(diǎn)。

由圖可知，通過得到跟隨線map-line的長度C與角度a即可，又由圖可知其實(shí)是求一個直角三角形的斜邊長度與角度，根據(jù)數(shù)學(xué)公式最終得出如下函數(shù)計算：

C=Math.sqrt(A*A+B*B)

a=Math.atan(A/B)*180/3.14159

取整：

C=Math.ceil(Math.sqrt(A*A+B*B))

a=Math.ceil(Math.atan(A/B)*180/3.14159)

其中A、B為目標(biāo)點(diǎn)與P點(diǎn)的坐標(biāo)之差。

源文件下載鏈接:https://pan.baidu.com/s/1wD1SvnY4V4RW7WimE2YUSQ 密碼:8qyg

本文由 @灰_白 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于 CC0 協(xié)議。