![Adobe XD界面设计与原型制作教程(全彩)](https://wfqqreader-1252317822.image.myqcloud.com/cover/258/26687258/b_26687258.jpg)
上QQ阅读APP看本书,新人免费读10天
设备和账号都新为新人
2.4 绘制基础形状
XD左侧工具栏中的“矩形”工具、“椭圆”工具
、“直线”工具
及“钢笔”工具
可以快速绘制简单的图形和图像,通过“选择”工具
,可以选择一个或多个对象对其进行编辑。
![](https://epubservercos.yuewen.com/5C9021/15168413805898006/epubprivate/OEBPS/Images/figure_0031_0006.jpg?sign=1738969002-jdvmYBi7AtwfFX4YS3RrEKqJt0l3pmru-0-e696ee86deed5504a7760004e41c3702)
观看在线教学视频
2.4.1 绘制矩形和圆角矩形
新建一个空白的XD文件,选中左侧工具栏中的“矩形”工具(或按快捷键R),此时鼠标指针变为“十字右下角有一个小矩形”的状态,在画板中按住鼠标左键不放,即可以拖动的距离为对角线绘制一个矩形。按住Option键(Mac OS)或Alt键(Windows)可以从鼠标指针落点的地方为中心开始绘制矩形。
![](https://epubservercos.yuewen.com/5C9021/15168413805898006/epubprivate/OEBPS/Images/figure_0031_0008.jpg?sign=1738969002-MTCNz0vL3Izj54toHM389mvBUiV2Q6Ki-0-851c475487f07f16ee5f803afadac677)
如果需要绘制一个正方形,在拖动鼠标指针的同时,按住Shift键,即可以拖动的距离为对角线绘制一个正方形。
![](https://epubservercos.yuewen.com/5C9021/15168413805898006/epubprivate/OEBPS/Images/figure_0031_0009.jpg?sign=1738969002-DBJ5LhrVXTFx1Xf2M9APb12wdf9iNrjD-0-eada62d9f21e4723514c00d8aa7d9e64)
绘制完成的矩形或正方形上有8个空心圆圈和4个内有圆点的圆圈
。将鼠标指针放在顶部、右侧、底部及左侧中间的这4个位置的空心圆圈
上,然后按住鼠标左键不放并拖动鼠标指针,可以以相反方向为基准在当前方向上修改形状的大小。将鼠标指针放在左上角、右上角、右下角及左下角这4个位置的空心圆圈
上,然后按住鼠标左键不放并拖动鼠标指针,可以以相反方向的顶点为基准在当前方向上同时修改宽和高的大小。拖动鼠标指针时按住Shift键,可以锁定宽高比并以等比例形式缩放图形。
4个内有圆点的圆圈属于“半径编辑”手柄,在任意一个“半径编辑”手柄上按住鼠标左键不放并将手柄向矩形的中心拖动,可以同时修改矩形4个角的圆角大小,制作出圆角矩形。
![](https://epubservercos.yuewen.com/5C9021/15168413805898006/epubprivate/OEBPS/Images/figure_0032_0006.jpg?sign=1738969002-ORLd0psLtjkpRuRDT0DeeNUYDn4NAabT-0-43a3e4ba73954f7334cd716088dfce05)
如果需要单独调整某一个角,可以按住Option键(MacOS)或Alt键(Windows)并拖动“半径编辑”手柄,这时只会更改选中的圆角半径。
![](https://epubservercos.yuewen.com/5C9021/15168413805898006/epubprivate/OEBPS/Images/figure_0032_0008.jpg?sign=1738969002-NiV8HKTnMkGb5b0ERqrCSUpkll0xBVFg-0-55ab97a8759baa2f93516a4f949c5024)
技巧提示
在后面的章节中,还将讲解如何通过属性检查器更精确地设置图形的“宽高”和“圆角”属性。