![Axure RP 原型设计实践(Web+APP)](https://wfqqreader-1252317822.image.myqcloud.com/cover/788/26688788/b_26688788.jpg)
3.9 自定义元件形状
在Axure RP 8版本中,矩形元件新增了一些新的图形。在“元件库”面板中,将矩形元件拖动到“页面设计”面板,可在“检视”面板的“属性”选项卡选择形状,也可以单击元件右上角小黑点进行设置。
设置默认形状的内容在讲解矩形元件时已讲解过,这里要讲解的是Axure RP 8新增的可以设置自定义形状、水平翻转和垂直翻转等功能。
1.将元件转换为自定义形状
从“元件库”面板拖入一个椭圆形元件到“页面设计”面板,之后选中该元件,单击右上角的小圆点,在形状设置对话框选择“转换为自定义形状”选项,用户就可以编辑该元件的形状了。
单击工具栏内的图标,在该元件上可增加、移动、删除节点,拖动节点就可以改变形状,操作参考如图3-42所示。
![](https://epubservercos.yuewen.com/6ACC54/15169318705331206/epubprivate/OEBPS/Images/50_01.jpg?sign=1739680970-tX0RSKKWcDl9niJmLXkD7eW6V4xBxpV7-0-4b013f79231b91639ca3da3d0daff94b)
图3-42 将元件设置为自定义形状
2.水平翻转
从“元件库”面板拖动两个文件元件到“页面设计”面板,选择右侧的文件元件后,右击选择“改变形状”→“水平翻转”命令,进行水平翻转操作,如图3-43所示。
3.垂直翻转
从“元件库”面板拖动两个文件元件到“页面设计”面板,选择右侧的文件元件后,右击选择“改变形状”→“垂直翻转”命令,进行垂直翻转操作,如图3-44所示。
![](https://epubservercos.yuewen.com/6ACC54/15169318705331206/epubprivate/OEBPS/Images/50_02.jpg?sign=1739680970-OGKd99g9LkWK5m4nD3etwQ76MTBqIw5l-0-f8700f7aafaf89aae62b2c1370d44554)
图3-43 将元件水平翻转操作
![](https://epubservercos.yuewen.com/6ACC54/15169318705331206/epubprivate/OEBPS/Images/50_03.jpg?sign=1739680970-rBseA9lrC4TRIJML3d3FUMpadHS8x4B7-0-95aa3370ce573b37bf519746ab1ccb2f)
图3-44 将元件垂直翻转操作
4.合并
从“元件库”面板拖动4 个椭圆形元件到“页面设计”面板,将右侧的黄色椭圆形元件(在下方)和绿色椭圆形(在上方)选中后右击选择“改变形状”→“合并”命令,操作结果如图3-45所示。
![](https://epubservercos.yuewen.com/6ACC54/15169318705331206/epubprivate/OEBPS/Images/50_04.jpg?sign=1739680970-ZKT9ksmu80ufI5JgefUtGxPTVGj0vnFu-0-282d1f3ee42ddac8f9bfb860a6bfac5e)
图3-45 元件合并
5.去除
操作方式与合并类似,去除操作选择的是“改变形状”→“去除”命令,此时,去除操作结果如图3-46所示。
![](https://epubservercos.yuewen.com/6ACC54/15169318705331206/epubprivate/OEBPS/Images/51_01.jpg?sign=1739680970-Z85jcHjPEVBzAPSCOU2EXXCKIxepny3F-0-37ee3f6150aa1efbe7fd36d3915dc9a8)
图3-46 元件去除
6.相交
操作方式与合并类似,去除操作选择的是“改变形状”→“相交”命令,此时,相交操作结果如图3-47所示。
![](https://epubservercos.yuewen.com/6ACC54/15169318705331206/epubprivate/OEBPS/Images/51_02.jpg?sign=1739680970-cDiMlBc0Jom0Q9NuAA0Vv1QfGeZgNxdP-0-32e937081f361b256df1a70f4eede7ed)
图3-47 元件相交
7.排除
操作方式与合并类似,去除操作选择的是“改变形状”→“排除”命令,此时,排除操作结果如图3-48所示。
![](https://epubservercos.yuewen.com/6ACC54/15169318705331206/epubprivate/OEBPS/Images/51_03.jpg?sign=1739680970-DFh87tKIa6zR4D2jTrAHgT4r7O27dpeC-0-e050fce5b33a12c6f78c121d750d915a)
图3-48 元件排除
8.结合
操作方式与合并类似,去除操作选择的是“改变形状”→“结合”命令,此时,结合操作结果如图3-49所示。
![](https://epubservercos.yuewen.com/6ACC54/15169318705331206/epubprivate/OEBPS/Images/51_04.jpg?sign=1739680970-G5LNHCPNOw4wLec5ad8Chb3xbAw3fDbm-0-e604f88d94dc88a2a3a7722ea272be39)
图3-49 元件结合
9.分开
在图 3-49 的基础上再进行分开操作,结合所形成的形状与合并相同,但又略有不同,因为分开是针对结合所形成的形状而言的,分开结果如图3-50所示。
![](https://epubservercos.yuewen.com/6ACC54/15169318705331206/epubprivate/OEBPS/Images/52_01.jpg?sign=1739680970-Oww4swUyP1gvFi3trHNA97mTHE4rAraC-0-c7a3ae1d6aa4c6ee76f6cdba4159512f)
图3-50 元件分开