Axure 给Image部件设置本地图片

Axure 专栏收录该内容
2 篇文章 0 订阅

目的:通过任意选择本地图片,给Image设置图片,显示在image部件上。

效果:


实现步骤:

Step1:先设置需要的部件

 (1)拖入text field部件,命名为:选择图片,设置类型为file

 (2)拖入image部件用来显示(1)选择的图片,命名为showimage

 (3)拖入动态面板,命名为temp

以上三个部件就是完成给image部件设置本地图片所需的部件了。为了顺利的演示效果,我们可以再拖进来两个image,并设置本地图片。


上图右侧的两个头像就是辅助用的。因为预览本地图片只能预览被axure生成(F8键生成工程)的图片。

Step2:给部件设置动作。

(1)设置text field部件的动作


这里需要借助动态面板的onshow和onhide来设置图片,onshow和onhide的切换和使用toggle来完成。

(2)设置动态面板temp的动作


首先设置onshow动作,再设置onhide动作。

1)onshow动作设置

具体来看,设置onshow动作时,将textfield部件选择的图片设置给显示用的image部件。这里需要注意下设置的路径


需要创建个临时变量,用来把textfield设置的图片路径赋值和显示部件image给关联起来。重点需要强调的是:D://[[sc.substring(sc.lastindexof('\\')+1)]]这个设置。这个设置的意思就是预览后,选择图片从电脑的D盘下面选择需要设置的图片。

F5预览工程后,大家可以通过点击image部件,右键,然后“审查元素”,可以看到image显示图片的完整路径。

设置完路径后,再设置toggle,切换动态面板temp的状态

2)onhide动作设置


onhide的设置就比较简单了,先wait10ms,再设置toggle即可。

Step3 生成工程

通过以上的设置,按F8生成工程


我设置了生成文件的路径为D://temp/sqxfile。点击上图的Generate,即可在D盘的temp/sqxfile文件夹下看到


然后打开images就可以看到一开始设置的两张辅助image图片。把这两张图片拷贝到电脑的D盘下。

Step4 设置图片


点击“选择文件”,然后打开电脑的D盘,选择刚才拷贝过来的图片即可显示在image部件上。不妨试试看喔!


 

  • 3
    点赞
  • 7
    评论
  • 2
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值