工作室组件类型与属性
组件概览
了解 Adseed 支持的所有组件类型及通用属性配置
Adseed 工作室提供多种组件类型，满足从静态展示到复杂交互的各种创作需求。每个组件都可以在画布上自由放置、调整，并通过属性面板进行精细配置。
组件类型总览
| 组件类型 | 说明 | 典型用途 |
|---|---|---|
| 图片 | 静态图像，支持 JPG/PNG/GIF/WebP | 背景、按钮、装饰 |
| 文本 | 可编辑文字内容 | 标题、说明、标签 |
| 视频 | 嵌入式视频播放 | 产品演示、教学 |
| 序列帧 | 逐帧动画效果 | 循环动效、过渡 |
| Spine 动画 | 2D 骨骼动画 | 角色、复杂动效 |
| 音频 | 声音播放（不可见） | 背景音乐、音效 |
| 容器 | 图层分组 | 组织和批量管理 |
| 组件模板 | 可复用交互模块 | 按钮组、弹窗 |
通用属性 — 显示属性
所有组件都共享以下显示属性，您可以在右侧属性面板中进行配置。
| 属性 | 说明 | 取值范围 | 默认值 |
|---|---|---|---|
| 位置 X | 组件左上角在画布上的水平坐标，单位为像素。原点在画布左上角，向右为正 | 任意数值 | 0 |
| 位置 Y | 组件左上角在画布上的垂直坐标，单位为像素。原点在画布左上角，向下为正 | 任意数值 | 0 |
| 宽度 | 组件的显示宽度（像素）。留空时自动使用素材原始宽度 | 正数 | 素材原始宽度 |
| 高度 | 组件的显示高度（像素）。留空时自动使用素材原始高度 | 正数 | 素材原始高度 |
| 旋转 | 顺时针旋转角度 | 0° ~ 360° | 0° |
| 水平缩放 | 水平方向缩放倍率，1 表示原始大小，2 表示放大两倍 | 任意正数 | 1 |
| 垂直缩放 | 垂直方向缩放倍率 | 任意正数 | 1 |
| 等比缩放 | 开启后调整缩放时保持宽高比 | 开/关 | 关 |
| 透明度 | 组件的显示透明度。在属性面板中以百分比显示（0% 完全透明，100% 完全不透明） | 0% ~ 100% | 100% |
| 可见性 | 控制组件是否在画面中显示。隐藏的组件仍存在于图层列表中 | 显示/隐藏 | 显示 |
| 层叠顺序 | 决定重叠组件的前后关系，数值越大越靠前 | 整数 | 0 |
| 水平斜切 | 沿水平方向倾斜变形 | 角度值 | 0 |
| 垂直斜切 | 沿垂直方向倾斜变形 | 角度值 | 0 |
位置和尺寸属性支持直接输入精确数值，也可以在画布上通过拖拽和缩放控制点进行可视化调整。
通用属性 — 图层属性
图层属性用于组织和管理组件在项目中的行为。
| 属性 | 说明 | 取值范围 | 默认值 |
|---|---|---|---|
| 名称 | 组件在图层列表中的显示名称，方便识别和管理 | 文本 | 空 |
| 标签 | 为组件设置标签，用于在事件系统中批量操作同标签的组件。详见标签系统 | 最长 20 字符 | 空 |
| 延迟出现 | 页面加载后延迟多久才显示此组件，单位毫秒 | ≥ 0 | 0 |
| 锁定 | 锁定后组件无法在画布上被选中或移动，防止误操作 | 开/关 | 关 |
| 锚点位置 | 设置组件相对于画布边缘的锚定位置，适配不同屏幕时保持相对位置 | 九宫格位置 + 无 | 无 |
| 锚点边距 | 锚点与画布边缘的间距（像素） | ≥ 0 | 0 |
| 手指跟随 | 开启后组件会跟随用户的触摸/鼠标位置移动 | 开/关 | 关 |
为组件设置有意义的名称是良好的创作习惯。当页面组件数量较多时，清晰的命名能让图层列表一目了然。
碰撞检测
碰撞检测用于判断两个组件是否在画面中发生了重叠，常用于互动游戏和拖拽判定等场景。
碰撞区域类型
每个组件可以设置不同的碰撞检测方式：
| 类型 | 说明 |
|---|---|
| 无 | 不参与碰撞检测（默认） |
| 矩形 | 使用矩形区域检测碰撞，适合方形或接近方形的组件 |
| 圆形 | 使用圆形区域检测碰撞，适合圆形或接近圆形的组件 |
自定义碰撞区域
选择矩形或圆形碰撞类型后，可以进一步自定义碰撞区域的宽度和高度。碰撞区域不必与组件的可见尺寸完全一致——您可以将碰撞区域设置得更大以降低操作难度，或设置得更小以要求更精确的对齐。
碰撞检测需要配合事件系统的碰撞事件使用。仅设置碰撞区域不会产生任何效果，还需要在事件系统中为组件绑定碰撞事件并配置相应的触发动作。
选择合适的组件
面对不同的创作需求，选择合适的组件类型能让您事半功倍。
| 需求场景 | 推荐组件 | 说明 |
|---|---|---|
| 静态展示图 | 图片组件 | 最通用的组件，支持多种图片格式 |
| 标题或说明文字 | 文本组件 | 支持字体、颜色、大小等排版配置 |
| 产品演示视频 | 视频组件 | 支持自动播放和循环播放 |
| 简单循环动画 | 序列帧组件 | 适合无骨骼的简单动画效果 |
| 复杂角色动画 | Spine 动画组件 | 适合有多动作切换的角色动画 |
| 背景音乐或音效 | 音频组件 | 不可见组件，纯声音播放 |
| 组织多个组件 | 容器 | 分组管理，批量移动和操作 |
| 可复用交互模块 | 组件模板 | 一次配置、多处复用 |
实际创作中，往往需要多种组件配合使用。例如一个「可点击的按钮」通常由图片组件（按钮背景）+ 文本组件（按钮文字）组成，再通过容器将它们编为一组，最后通过事件系统添加点击交互。善于组合不同组件，可以实现丰富多样的互动效果。
这个页面有帮助吗？