- Adobe XD界面设计与原型制作教程(全彩)
- 文家齐
- 92字
- 2020-08-27 20:21:57
2.4 绘制基础形状
XD左侧工具栏中的“矩形”工具、“椭圆”工具
、“直线”工具
及“钢笔”工具
可以快速绘制简单的图形和图像,通过“选择”工具
,可以选择一个或多个对象对其进行编辑。
![](https://epubservercos.yuewen.com/5C9021/15168413805898006/epubprivate/OEBPS/Images/figure_0031_0006.jpg?sign=1739627748-1YpazLqcf6yo3NVCmSwTndQFJgiBC6C2-0-3ebb4504734b1231af6ea6e7ed3a9a80)
观看在线教学视频
2.4.1 绘制矩形和圆角矩形
新建一个空白的XD文件,选中左侧工具栏中的“矩形”工具(或按快捷键R),此时鼠标指针变为“十字右下角有一个小矩形”的状态,在画板中按住鼠标左键不放,即可以拖动的距离为对角线绘制一个矩形。按住Option键(Mac OS)或Alt键(Windows)可以从鼠标指针落点的地方为中心开始绘制矩形。
![](https://epubservercos.yuewen.com/5C9021/15168413805898006/epubprivate/OEBPS/Images/figure_0031_0008.jpg?sign=1739627748-8vxMWzjwEZOu3aw29Gh4NgTuodPb1i6S-0-e52642d5d6664a27ac2170f4c2257874)
如果需要绘制一个正方形,在拖动鼠标指针的同时,按住Shift键,即可以拖动的距离为对角线绘制一个正方形。
![](https://epubservercos.yuewen.com/5C9021/15168413805898006/epubprivate/OEBPS/Images/figure_0031_0009.jpg?sign=1739627748-Xk9nQdDCuYDvIdnYgnuV8iKLSo0yd6tZ-0-34f4ca4010558ae58b250a5d12c9f0fc)
绘制完成的矩形或正方形上有8个空心圆圈和4个内有圆点的圆圈
。将鼠标指针放在顶部、右侧、底部及左侧中间的这4个位置的空心圆圈
上,然后按住鼠标左键不放并拖动鼠标指针,可以以相反方向为基准在当前方向上修改形状的大小。将鼠标指针放在左上角、右上角、右下角及左下角这4个位置的空心圆圈
上,然后按住鼠标左键不放并拖动鼠标指针,可以以相反方向的顶点为基准在当前方向上同时修改宽和高的大小。拖动鼠标指针时按住Shift键,可以锁定宽高比并以等比例形式缩放图形。
4个内有圆点的圆圈属于“半径编辑”手柄,在任意一个“半径编辑”手柄上按住鼠标左键不放并将手柄向矩形的中心拖动,可以同时修改矩形4个角的圆角大小,制作出圆角矩形。
![](https://epubservercos.yuewen.com/5C9021/15168413805898006/epubprivate/OEBPS/Images/figure_0032_0006.jpg?sign=1739627748-IuP4jHY80PaM16meXIIQHjQshOTxX2Q7-0-4c3c75cbf2d0b4e28ce4c42b4f2ceabe)
如果需要单独调整某一个角,可以按住Option键(MacOS)或Alt键(Windows)并拖动“半径编辑”手柄,这时只会更改选中的圆角半径。
![](https://epubservercos.yuewen.com/5C9021/15168413805898006/epubprivate/OEBPS/Images/figure_0032_0008.jpg?sign=1739627748-4IETlqxcjfIEj9JYumMDLtEDCBmrSe4X-0-64773e068c0390c5808d221a307cca2d)
技巧提示
在后面的章节中,还将讲解如何通过属性检查器更精确地设置图形的“宽高”和“圆角”属性。