编辑导语:在很多软件中,我们都能看到画图标记功能。例如在阅读时,标注出重点内容;截图时,圈出需要他人注意的地方。但Axure在演示时,并没有相关功能。因此,(网站开发工资一般多少),作者分享了Axure高保真教程,总结如何制作画图标记原型,一起来看看吧。

Axure高保真教程:画图标记原型

画图标记在很多软件中是一个常用的功能,例如阅读时标记出好词好句;看地图时标记出具体位置;玩找不同的游戏时标记出不同的地方……

由于Axure在演示时并没有相关的标记功能,(淘宝运营教程视频),所以本期教程已找不同的游戏为案例,主要介绍如果制作动态的标记元件,方便我们日后的使用。

一、制作完成后应具备以下效果

在规定区域内可以通过鼠标拖动的方式画圆

画的圆形跟随鼠标拖动改变大小,形状可以是正圆或者椭圆

可以画多个的圆形

Axure高保真教程:画图标记原型

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

二、制作材料及交互
1. 背景图片

需要被标记的图片,如果需要被标记的是文章或者地图,也可以用他们代替,原理都是一样,只是做背景使用。

2. 圆形图案

填充颜色选择透明,边框颜色为红色,(拼多多开店都需要什么东西),案例中是圆形图案,(拼多多流量一直下降),如果你们需要用矩形或者下划线,也可以用对应形状代替。

3. 文本标签

新建两个文本标签,其中一个命名为x值,另外一个命名为y值,默认文本0,这两个文本用于后续计算逻辑,所以可以隐藏起来。

4. 动态面板

动态面板的大小和背景图片一致,(抖音直播怎么下单买东西),移动至和背景图片相同的位置。或者说动态面板的所在的地方,(淘宝运营怎么做数据统计),就是能实现动态交互的地方。

我们将圆形以及xy值的文本放在动态面板内。

交互处理:

在动态面板鼠标按下时:

设置圆形的尺寸为长1宽1(这里是将圆的大小设置为最小),锚点在左上角

设置文本x值为:Cursor.x-this.x;(Cursor.x是鼠标所在坐标的x值,this.x是动态面板所在坐标的x值,因为圆形在动态面板里面,(淘宝运营推广话术),所以需要减去动态面板的x值,(拼多多开店需要多少钱的费用),才能求出圆形出现的x坐标值)

设置文本y值为:Cursor.y-this.y;(Cursor.y是鼠标所在坐标的y值,this.y是动态面板所在坐标的x值,同样是因为圆形在动态面板里面,所以需要减去动态面板的y值,才能求出圆形出现的y坐标值)

移动圆形到达的x:文本x的值(上面计算的x值),y:文本y的值(上面计算的y值)

显示圆形

Axure高保真教程:画图标记原型

鼠标拖动时:

设置圆形尺寸:长=TotalDragX,宽=TotalDragY。TotalDragX和Y代表的是鼠标拖动的x横距离和y纵距离,(抖音直播伴侣窗口怎么设置),设置锚点在左上角。这样设置以后圆形就可以跟随鼠标拖动变化大小。

Axure高保真教程:画图标记原型

拖动结束时:

设置圆形尺寸:长=TotalDragX,宽=TotalDragY。这里和上面设置尺寸的逻辑一致

设置当前元件至于底层(将该动态面板至于底层)

设置图片至于底层

Axure高保真教程:画图标记原型

这里解释一下,为什么要将当前的动态面板和图片都置于底层,因为如果需要标记多个位置的话,我们首先需要复制上述写好交互的动态面板,需要标记几个就复制几个,当第一个画完后,会挡住下面的元件。

因此需要将他置底,置底后又被图片挡住了,看不到已标记的内容,(惠安网站快速排名),所以还需要将图片置底,这样就可以实现标记多个的交互了。

单下载文件文章显示网盘30天,自己及时保存! 查看下载常见问题说明? 单下载文件不包含安装或技术指导,下载之前认真看完常见问题说明! 遇到网盘链接失效无法下载,联系站长处理! 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!如果无意侵犯了您的权益请与我们联系,我们将在24小时内删除!