logo
帮助文档/图层与工具/使用图层/调整对齐、旋转和坐标

调整对齐、旋转和坐标

本文将介绍如何调整图层的对齐、坐标、尺寸和旋转角度。选中任意图层都可以设置上述参数。你可以在右侧边栏中的设计面板找到这些属性,也可以在画布中直接调整部分属性。 '对齐.png'

自动布局容器的对齐、坐标、尺寸设置方式和本文所介绍的有差别。

👉🏻了解更多关于自动布局的基本属性

对齐

对齐功能能够调整相对于其他图层的图层位置。Motiff 妙多会根据你选中的图层确定对齐方式。

  • 选中单个图层:选中有父图层的图层时,该选中图层将相对于父图层对齐。该逻辑适用于组、容器或包含了容器的组件。
  • 选中多个图层:选中多个同层级的图层时,选中图层之间相互对齐。

当选中一个没有父图层的图层时,其子图层会相对于该选中图层对齐。

👉🏻了解更多关于文本对齐设置的信息

使用右边栏中的对齐方式来实现图层相对于其父图层的对齐或多个图层之间的相互对齐,从左到右依次为:

  • 左对齐
  • 水平居中对齐
  • 右对齐
  • 顶对齐
  • 垂直居中对齐
  • 底对齐

你也可以使用快捷键实现对齐:

效果macOS 快捷键Windows 快捷键
左对齐⌥ Option  + AAlt + A
水平居中对齐⌥ Option  + HAlt + H
右对齐⌥ Option  + DAlt + D
顶对齐⌥ Option  + WAlt + W
垂直居中对齐⌥ Option  + VAlt + V
底对齐⌥ Option  + SAlt + S

Tip:创建固定图层,在调整图层尺寸时通过约束来控制图层的响应方式。

👉🏻了解更多关于如何使用约束

对齐设置

调整图层大小过程中,使用对齐设置可以帮助对齐画布中的元素。开启对齐设置时,在移动图层或矢量锚点时会出现一根红色参考线作为可视化指示。

对齐像素网格:将图层与其底部网格对齐,以避免导出图层时出现未对齐的像素错误。像素网格不需要可见,只要开启后就可以正常生效。

你可以在 Motiff 妙多的工具栏左侧「主菜单 > 偏好设置」或右侧「缩放/查看选项」中开启或关闭对齐设置。

分布

分布操作必须同时选中多个图层才会生效,选择分布选项将会使得选中图层等间距分布。目前支持两种分布方式:

  • 水平等间距分布:水平方向上,最左边的图层和最右边的图层位置不变。
  • 垂直等间距分布:垂直方向上,顶部的图层和底部的图层位置不变。

坐标

你可以沿着水平(X 轴)和垂直(Y 轴)两个方向上调整画布中图层的位置。在 Motiff 妙多中使用 X 和 Y 坐标表示图层在画布上的位置。这里指的是图层左上角在画布中的坐标。

  1. 1.打开右边栏中的设计面板。
  2. 2.你可以使用以下两种方式修改坐标:
    1. a.XY 字段位置上调整图层的坐标。
    2. b.使用基本的数学运算( - + * / ^ ())来快速调整 X 和 Y 坐标的值。你可以在当前值的前面或者后面添加公式,也可以将其完全替换为新公式。

画布中图层旋转时,图层的 X 和 Y 坐标依然是原始图层左上角在画布中的坐标值。

方向键微调

Motiff 妙多支持通过方向键微调图层的 X 和 Y 坐标,当前有两个默认的微调量:小微调和大微调。默认情况下,小微调设置为 1 ,大微调设置为 10。

选中图层后,可以直接在画布中通过使用箭头方向键来调整图层的坐标数值,方向键将会使用当前你所设置的小微调量,按下 Shift 使用大微调量设置。

尺寸

调整尺寸

画布中的每个图层都有各自的尺寸,可以通过以下方式查看图层的尺寸:

  1. 1.在画布或图层面板中选中图层。
  2. 2.两种方式查看尺寸大小:
    1. a.查看图层边界框下方的蓝色标签中的尺寸参数。
    2. b.查看设计面板中的 WH 字段。

有三种调整图层尺寸的方法:

  • 调整图层的宽度:光标悬停在图层的左边界或右边界,直到出现 '16_panel_auto width horizontal.svg' ,点击并拖动调整大小。
  • 调整图层的高度:光标悬停在图层的上边界或下边界,直到出现 '16_panel_auto width vertical.svg' ,点击并拖动调整大小。
  • 调整图层的宽高:光标悬停在图层边界框的任一个角附近,直到出现 '16_panel_auto width horizontal.svg' ,点击并拖动调整大小。
  • 直接调整右侧边栏中的 WH 的数值。

组的属性由子图层组合而成,其本身并没有任何属性。当组内的图层被调整时,组的边界也会随之调整。

锁定比例

锁定比例允许你将图层的宽高锁定为当前的比例。你可以直接在右侧边栏中的尺寸设置(WH 字段)右侧找到 '16_panel_free scale.svg'

启用锁定比例设置后,当你在侧边栏中调整图层大小时,Motiff 妙多将会保留原始的宽高比例。如果你调整了WH 其中的任一个字段值,另一个也会成比例调整。

按下 Shift 可以创建出正方形、圆形和正多边形。Motiff 妙多会在右边栏中启用锁定比例设置。

默认情况下,Motiff 妙多会从左上角开始绘制一个形状,你可以按下修饰键 ⌥ Option / Alt 从中心位置处开始绘制形状。

旋转角度

旋转单个图层(如容器和组等图层类型)时将使用所选图层的水平或垂直中心作为旋转中心点。

添加到画布中的图层默认旋转角度为 ,在每个方向上都可以将所选图层旋转 180°

  • 旋转角度为正数时顺时针朝着 180° 旋转。
  • 旋转角度为负数时逆时针朝着 -180° 旋转。

在任一方向上旋转角度数到 180°, Motiff 妙多将会在该方向上从 开始重新计算。例如:180° 的图层再顺时针旋转 15°,会得到一个旋转角度为 -165° 的图层。 '旋转角度.png'

设计面板

在右边栏的设计面板中找到旋转角度字段,按照以下步骤调整:

  1. 1.选中要旋转的图层。
  2. 2.在右边栏中,在 '16_panel_angle.svg' 字段中输入目标旋转角度数值。

画布

  1. 1.将光标悬停在图层边界框任意一个角附近,直至出现'Cursors_Customize_rotate.svg'
  2. 2.点击并拖动光标旋转:
    1. a.顺时针拖动向 180° 调整为正值。
    2. b.逆时针拖动向 -180° 调整为负值。
  3. 3.按下 Shift15的增量来旋转。

选中图层的效果不会随图层的旋转而旋转。

翻转

你可以对选中图层使用水平翻转和垂直翻转。支持通过右键菜单选中对应的翻转选项或使用快捷键:

  • 水平翻转:Shift + H
  • 垂直翻转:Shift + V

更改图层顺序

在画布中添加的每个形状、文本或图像等都有自己的图层。这使得你在创建复杂的设计内容时可以单独对每个图层进行调整。

图层 Z 轴顺序

'Z 轴顺序.png'

你可以沿着以下三个维度或轴中的任何一个来调整当前选中图层的位置:水平(X 轴)、垂直(Y 轴)、深度(Z 轴)。不同于 X 轴和 Y 轴可以直接在设计面板中的对应字段进行调整。如果你想要调整图层在画布中的深度(Z 轴)或层级顺序,可以直接在图层面板中调整图层的顺序实现。

你可以将图层移动至画布的前面或后面,也可以将图层从组内或容器内移出。

左边栏中的图层面板会展示当前页面上的所有图层,同时会体现出当前图层之间的层级顺序:最外层的图层位于最前面,最内层的图层位于最后面。

如果你熟悉 CSS,图层的深度对应于对象的 z-index 。

Motiff 妙多支持通过图层面板、快捷键和右键菜单这三种方式调整图层顺序:

图层面板调整图层顺序

在图层面板中可以直接通过更改图层的位置来调整顺序:

  1. 1.打开左边栏的图层面板。
  2. 2.点击并拖动图层以更改其在图层层级结构中的位置,对应关系如下:
    1. a.向上移动图层使得图层顺序向前。
    2. b.向下移动图层使得图层顺序向后。
  3. 3.松开光标后调整完毕。

快捷键调整图层顺序

Motiff 妙多支持通过以下快捷键来调整图层的顺序:

效果macOS 快捷键Windows 快捷键
上移一层⌘ Command  + ]Ctrl + ]
移至顶层⌘ Command  + ⌥ Option + ]Ctrl + Shift + ]
下移一层⌘ Command  + [Ctrl + [
移至底层⌘ Command  + ⌥ Option + [Ctrl + Shift + [

右键菜单调整图层顺序

你可以通过选中图层后,右键点击选中图层后打开右键菜单,选择移至顶层或移至底层选项达到调整图层顺序的目的。

如果你对任何修改不满意,可以通过快捷键撤销操作:

  • macOS:⌘ Command + Z
  • Windows:Ctrl + Z

调整数值

运算

Motiff 妙多中设计面板中的 X、Y、W、H 和旋转角度字段都支持数学运算。你可以直接使用 + - * / 四则运算来调整图层的参数。更复杂的运算你可以在字段中使用括号 () 或者使用 ^ 来创建指数运算。

以下提供了一些示例,在实际使用过程中支持输入任何数值:

  • +10:在当前值基础上加 10
  • -15:在当前基础上减去 20
  • *3:当前值乘以 3
  • /2:当前值除以 2
  • ^3:创建当前值的 3 次方
  • (x/2)+4:当前值除以 2 之后再加 4(x 表示当前值)
  • 多个值 +100:为当前具有多个不同值的选定图层分别加 100 '运算规则.png'

运算对多选图层也生效,在 X、Y、W、H 和旋转角度字段中输入数学运算,更改选中的所有图层的参数值。

你需要编辑字段并将运算添加到现有数值中,如果你只是选中字段区域并直接添加运算,字段中的原先数值会被替换。

拖动字段输入区域调整

除了上面介绍的输入数值外,你也可以通过在设计面板中字段输入框区域附近拖动来调整。具体步骤如下:

  1. 1.选中目标图层。
  2. 2.将光标悬停在对应字段的输入框区域上,直至出现调整光标,你也可以将鼠标悬停到输入框内并按住修饰键 ⌥ Option / Alt 调整。
  3. 3.点击图标并拖动以调整数值大小,向左拖动光标减小数值,向右拖动光标增大数值。