墨刀基础篇(一) ：2.常用组件(基础：文本和矩形)

一：组件简介

墨刀组件会根据不同的场景提供不同的组件，几乎囊括了常见的所有场景：

• 移动端：APP、小程序、H5落地页、公众号、iOS原生、Android原生。

• H5落地页是一种基于HTML5技术开发的互动式网页，具有以下特点： 创意设计：H5页面注重创意和视觉效果，通过丰富的动画和交互元素吸引用户的兴趣。 多样性：H5页面可以包含多种媒体元素，如图片、音频、视频等，丰富页面的表现形式。 社交分享：H5页面通常具有社交分享功能，方便用户将页面分享给朋友，扩大品牌或活动的影响力。

• PC端：Web网站、Web后台、macOS、Windows。
• 平板端：iPadOS、Android。
• 可视化大屏。
• 智能电视：Apple tvOS、AndroidTV。
• HMI：工业HMI、车载中控。

• Human Machine Interface（“人机接口”，也叫"人机界面”），系统和用户之间进行交互和信息交换的媒介， 它实现信息的内部形式与人类可以接受形式之间的转换。凡参与人机信息交流的领域都存在 着人机界面。

• 手表：watchOS、Android Watch。
• 幻灯片。
• 通用。

同一个场景对元件进行分组，如Web后台包括：

• 基础
• 表单
• 导航
• 图表
• 高级图表
• 多媒体
• AI组件

二：快捷键

• Shift：同时选中多个组件。
• 可以通过拖拽改变原件的大小，也可以在拖拽的时候安装Shift进行等比例扩大缩小。
• 按住Alt拖拽复制元件，按住Alt也可以用来测距。
• Ctrl + 滚动 ：放大和缩小
• Ctrl + G ：组合
• 鼠标放到组件上，按住Alt键，显示距离其它元件的像素距离。
• T ：快速添加文字
• Ctrl + ：放大画布
• Ctrl - ：缩小画布
• Ctrl + R : 刷新运行的页面

三：Web后台组件

元件命名：当我们拖拽原件的时候应该保持好的习惯，应该为一些重要的元件根据功能起一个有意义的名字，起名字的目的是为了在添加交互事件的时候方便找到要操作的组件（事件源）。推荐做法就是对于重要的组件无论后续会不会涉及到事件都推荐命名，对于不太重要的组件等到添加事件时再回过头来对该组件再命名。

每个组件都可以通过上方搜索按钮搜素，一般会搜索出多个，这样选择一个适合的即可。

3.1 基础（文字&矩形）

基础组件提供了日常使用频率最高并且功能比较简单的组件，很多复杂的组件都可以通过基础组件组合在一起绘制成的。基础组件当中又以文字和矩形最为基础，可以说是组件的基石，所以这里对文字和矩形进行详细的研究。

文字可以从组件中拖拽到绘图区，也可以直接在绘图区中使用快捷键 T，然后使用鼠标移动到指定的地方单击即可。对于文字最重要的就是她的外观样式。

对齐

对齐在顶部工具栏和右侧外观面板中都有，当选中多个元件时可以调整对齐方式。

• |I|水平等间距：通常多个组件放在一排，想让多个组件之间等距离间隔。
  

元件命名

• 将元件拖进绘图区每个元件都有一个名字，默认的名字不够直观，当相同的元件出现多个时不太容易查找，所以尽量为每一个元件命名一个合适的名字，可以根据组件的功能来命名。
• 小眼睛：表示显示和隐藏组件。
• 锁定：锁定了就不能在页面上操作该组件了，也不能选中了，但是可以通过右侧的样式面板来修改，通常当组件比较密集时，需要同时选中多个组件，但是又容易选中不需要的组件，通常将该组件进行锁定，这样就选中不了了。

坐标和尺寸

• 所有组件都有坐标(x, y)、尺寸(w、h)、旋转角度、锁定比例。
• 锁定比例：这个功能比较常用，有的时候我们放大和缩小组件的时候想保证在放大和缩小时要按照原始组件的宽高比进行放大和缩小，此时就要锁定比例；有的时候我们就想自定义组件的大小此时就不能锁定比例。
• 坐标调整可以直接输入数字，也可以通过上下箭头进行微调，也可以拖动向左或者向右拖动字母进行连续区间范围内调整。
• 在调整坐标时也可以通过键盘的上下左右键来微调。

不透明度&滚动时

不透明度

不透明度：0表示隐藏，100表示完全显示，值越小越不透明，越看不清，可以利用透明度来调整元件的不重要性，

• 例如黑色字体透明度调整为30变成浅灰色了，对于不重要的信息可以使用较小的透明度，让人忽略。
• 有的时候使用透明度来调整背景色，将透明度调整小一点，让背景色从深色变为浅色。
• 有时候用来显示和隐藏元件，0：表示隐藏，100：表示显示。

滚动时

滚动时用来控制当页面发生滚动时，页面上的组件是否跟随滚动还是固定在某个位置不发生滚动。

• 跟随滚动：组件放在页面中，页面滚动，组件也跟随页面发生滚动。
• 相对顶部固定：当页面发生滚动时，组件不跟随页面滚动，而是固定在页面的顶部，通常都是在APP中使用该属性来固定标签栏，然后再让标签栏置顶，达到页面滚动时标签栏在页面顶部不发生滚动的效果。
  相对顶部固定也可以通过墨刀提供的其它方式实现，选中整个页面，将箭头向下拖动到要固定的位置即可。

• 相对底部固定：当页面发生滚动时，组件不跟随页面滚动，而是固定在页面的底部，通常都是在APP中使用该属性来移动端导航栏，然后再让移动端导航栏置顶，达到页面滚动时移动端导航栏在页面底部不发生滚动的效果。

相对顶部固定也可以通过墨刀提供的其它方式实现，选中整个页面，将箭头向上拖动到要固定的位置即可。

• 吸顶固定：当页面发生滚动时，组件即不是固定在顶部也不是固定在底部，而是跟随滚动，但是固定在固定位置时就停留在那里不在发生滚动。边框为绿色的矩形就是滚动时要吸附的位置。

外观

1. 圆角：可以同时调整四个角的圆角，也可以分别对单个角单独调整。
2. 填充：填充背景色。
3. 描边：就是边框，可以设置边框颜色，边框粗细，以及分别设置上下左右边框是否显示
4. 阴影：可以通过xy调整阴影的方向、模糊程度等。

文本

1. 设置字体。
2. 设置字号、颜色透明度、加粗、斜体、下划线、删除线。
3. 对齐方式
4. 设置字间距、行高、文本排列、列表样式、链接、段间距、剪裁文本（当文本上下超出矩形的高度时是否剪裁掉不显示）

动效

动效一般是在事件交互时设置的动画效果。

智能填充

矩形里面的内容也支持智能填充，可以填充 人名、标题、时间、号码、邮箱等。