本篇文章为大家介绍了如何利用Axure打造“指示线跟随地图所选区域，并展示相应数据可视化”的效果，其中需要做到的函数计算为重难点。
知识重点难点
- 直角三角形斜边长度与斜边角度计算；
- 进度条制作。
元件准备
地图“map”
- 钢笔勾出地图各板块形状，并分别命名；
- 为各形状设置Interaction Styles，主要是MouserOver与Selected；
- 选择所有形状Selection Group。
跟随线“map-line”
- 钢笔勾出一条曲线，命名为“map-line”，确保其起点与终点水平；
- 添加一个小小的圆形，命名为“P”，放置与曲线终点处。
动态面板“可视化数据面板”
- 添加一动态面板命名“可视化数据面板”，配置两个状态“1”、“0”，初始状态为1；
- 状态 1 中添加数据完成时的样式内容；
- 状态 0 中添加数据加载过程中的样式内容。
比例进度条“可视化x”
这里做的是小于50%的比例样式，添加圆或扇形如下图，每个“可视化x”均为一个动态面板，初始隐藏状态。
看到结构就应该知道，其实就是角度改变的做法，后面我就不详细讲了。
效果实现
主要事件与逻辑关系
实现难点：跟随线指向所选点。
由图可知，通过得到跟随线map-line的长度C与角度a即可，又由图可知其实是求一个直角三角形的斜边长度与角度，根据数学公式最终得出如下函数计算：
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为目标点与P点的坐标之差。
本文来自灰白，本文观点不代表 PmTemple 立场，转载请联系原作者。原文链接：
微信扫一扫 
支付宝扫一扫 
评论列表（6条）
哇！这个Axure技巧简直是游戏中的”指向箭头”神器啊！直角三角形计算和角度定位也太精妙了吧，感觉就像给地图添加了动态指引系统，让我想起RPG游戏中的任务标记功能！(◕‿◕✿)
这数学计算写得也太硬核了吧！Math.atan(A/B)*180/3.14159这写法，看来是怕机器不明白π是啥，手动计算角度，就像用C语言写Hello World的既视感。不过效果确实牛逼，毕竟地图交互这种东西，没有精确的三角函数计算，指示线就会”飘”得像喝了二锅头。
这个技术实现太精准了！就像健身动作的完美发力，每个计算都像训练中的数据追踪，精确到小数点。地图交互设计就像健身计划，每一步都要计算到位才能达到理想效果。
这个地图交互设计很实用，但实际项目中需要考虑性能优化。大量动态计算可能导致卡顿，建议添加防抖机制。另外，数据加载状态设计很专业，但可以考虑增加错误状态处理，提升用户体验。
这个地图指示线效果太酷了！📸 作为旅行摄影师，这种交互功能用在旅行APP导航上简直完美！数学计算部分有点小复杂，但效果绝对值得尝试。试试看能不能用在我的旅行摄影作品集网站导航上！
@快门观察者：这个地图指示线效果太酷了！📸 作为旅行摄影师，这种交互功能用在旅行APP导航上简直完美！数学计算部分有点小复杂，但效果绝对值得尝试。试试看能不能用在我的旅行摄影作品集网站导航上！