介绍#

PosterKit 是一个轻量、跨框架的海报编辑器组件库。基于 Web Components 构建，既可作为原生自定义元素直接使用，也提供 React/Vue 适配层，做到即插即用、低耦合、零依赖，适合在电商海报、活动 Banner、社媒分享图、营销长图等场景快速搭建在线海报编辑能力。

为什么选择 PosterKit#

• 跨框架易用：基于 Web Components，原生使用或接入 React/Vue 都很顺滑。
• 体积小性能优：使用 Stencil 构建，按需加载，运行高效。
• 类型安全的数据模型：通过 TypeScript 联合类型区分图片/文本卡片（CardData），字段更安全。
• 专注海报编辑核心：拖拽/缩放、图层与快捷操作、SVG 文本高保真、缩放与适配、变更事件同步等开箱即用。

主要特性#

• 拖拽与八点缩放：卡片支持拖拽与八个方向锚点缩放，内置最小尺寸限制（10×10）。
• 图片与文本卡片：通过 CardData 精确区分 image/text，不同卡片类型具备对应字段与行为。
• SVG 文本高保真：文本以 SVG 渲染，支持字体、字号、颜色、字重、斜体、装饰等，并可导出到 Canvas 生成海报。
• 比例自适应与缩放：预览区域按宽高基准自适应外层，记录缩放比例（zoom），便于进行坐标与尺寸换算。
• 事件通信：通过 current-data-change 事件向外层同步当前数据变化，便于保存、协作或联动面板。
• 快捷操作与层级：提供常用编辑操作（上移、下移、删除等），编辑体验顺滑。
• 跨框架集成：提供 React/Vue 包装与原生自定义元素三种形态，满足不同技术栈需求。

核心概念#

• 画布（预览区）：用于呈现与编辑当前海报的工作区域，可根据容器自适应并支持缩放（zoom）。
• 卡片（Card）：海报上的元素单元，分为图片卡片与文本卡片，支持拖拽与缩放，具备层级。
• 数据模型（CardData）：使用 TypeScript 联合类型将 image/text 区分开来，保证编辑与落盘的类型安全。
• 事件（current-data-change）：编辑中的数据变更事件，对接外层状态管理、持久化或联动逻辑。

适用场景#

• 电商营销：商品海报、促销活动、节日大促模板。
• 运营活动：活动 Banner、KV 主视觉快速产出。
• 社媒内容：长图、分享图批量生成。
• 模板平台：搭建可配置的模板库与在线编辑器。

下一步#

• 快速开始：前往《快速开始》完成安装与最小示例。
  • 链接：/guide/start/getting-started
• 在 React 中使用：查看 React 集成指引。
  • 链接：/guide/react/

如果你正在评估是否引入 PosterKit，建议先用最小示例集成到你的页面，验证拖拽/缩放、文本编辑与数据事件是否满足需求，再逐步扩展到模板化与持久化方案。