欢迎您来到im体育办公家具!
im体育Axure高保真教程:画图标记原型
时间:2021-09-15   编辑:admin

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

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

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

  填充颜色选择透明,边框颜色为红色,案例中是圆形图案,如果你们需要用矩形或者下划线,也可以用对应形状代替。

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

  动态面板的大小和背景图片一致,移动至和背景图片相同的位置。或者说动态面板的所在的地方,就是能实现动态交互的地方。

  设置文本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值)

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

  因此需要将他置底,置底后又被图片挡住了,看不到已标记的内容,im体育所以还需要将图片置底,这样就可以实现标记多个的交互了。

  以上就是高保真画图标记原型的制作方法了,感兴趣的同学们可以动手试试,谢谢您的阅读。

  听到很多言论说在中国程序员是吃青春饭的,那么产品经理呢,也吃青春饭吗?

  人人都是产品经理(是以产品经理、运营为核心的学习、交流、分享平台,集媒体、培训、社群为一体,全方位服务产品人和运营人,成立9年举办在线+期,线+场,产品经理大会、运营大会20+场,覆盖北上广深杭成都等15个城市,在行业有较高的影响力和知名度。平台聚集了众多BAT美团京东滴滴360小米网易等知名互联网公司产品总监和运营总监,他们在这里与你一起成长。

上一篇:揭露Mavericks精美背景图片隐藏路径      下一篇:抗疫心中医情:小香囊彰显大情怀