# StickerView

**Repository Path**: guocheng6/StickerView

## Basic Information

- **Project Name**: StickerView
- **Description**: StickerView
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-05-07
- **Last Updated**: 2026-01-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README



# StickerView (API12)

一个功能强大的 HarmonyOS/OpenHarmony 贴纸组件，支持文字贴纸和图片贴纸的添加、缩放、拖动、翻转、删除等操作。

## ✨ 特性

- **多类型贴纸支持**：支持文字贴纸和图片贴纸
- **丰富的交互操作**：拖动、缩放、翻转、删除、双击编辑
- **灵活的事件监听**：提供完整的生命周期回调
- **API12 兼容**：基于 HarmonyOS API 12 开发
- **简单易用**：简洁的 API 设计，快速集成

## 📦 安装

```bash
ohpm i @gococ/sticker_view
```

## 🚀 快速开始

### 1. 创建 StickerView

```typescript
// 创建 model 对象
model: StickerView.Model = new StickerView.Model();

StickerView({model: this.model})
  .width('100%')
  .height('100%')
  .onAreaChange((oldValue: Area, newValue: Area) => {
    // 增加默认贴纸的操作
  })
```

### 2. 添加文字贴纸

```typescript
// 添加文字贴纸
const textSticker = new TextSticker("点击编辑文字");
textSticker.color = '#000000';
textSticker.alignment = 1;
textSticker.resizeText();
this.model.addSticker(textSticker);
```

### 3. 添加图片贴纸

```typescript
private async addMateriaByPath(path: string) {
  let file = fs.openSync(path, fs.OpenMode.READ_ONLY);
  const imageSource = ImageUtil.createImageSource(file.fd);
  const pixelMap = await imageSource.createPixelMap();
  const imageSticker = new ImageSticker(pixelMap);
  imageSticker.isStorage = true;
  imageSticker.imagePath = path;
  this.model.addSticker(imageSticker);
}
```

### 4. 事件监听

```typescript
const onStickerOperationListener: OnStickerOperationListener = {
  onStickerAdded: (sticker: Sticker): void => {
    // 添加 sticker 时
  },
  onStickerClicked: (sticker: Sticker): void => {
    // 点击 sticker 时
  },
  onStickerDeleted: (sticker: Sticker): void => {
    // 删除 sticker 时
  },
  onStickerDragFinished: (sticker: Sticker): void => {
    // sticker 拖拽结束时
  },
  onStickerTouchedDown: (sticker: Sticker): void => {
    // sticker 按下时
  },
  onStickerTouchedMove: (sticker: Sticker): void => {
    // sticker 按下并移动时
  },
  onStickerZoomFinished: (sticker: Sticker | null): void => {
    // sticker 缩放结束时
  },
  onStickerFlipped: (sticker: Sticker): void => {
    // sticker 翻转时
  },
  onStickerDoubleTapped: (sticker: Sticker): void => {
    // sticker 双击时
  },
  onStickerNotClicked: (): void => {
    // sticker 未点击到时
  }
}
this.model.setOnStickerOperationListener(onStickerOperationListener)
```

## 📚 API 参考

### Model 方法

| 方法 | 说明 |
|:---|:---|
| `addSticker` | 添加单个 sticker |
| `addStickers` | 批量添加 sticker |
| `setCurrentSticker` | 设置当前选中的 sticker |
| `getCurrentSticker` | 获取当前已选中的 sticker |
| `getAllSticker` | 获取全部 sticker |
| `remove` | 移除指定 sticker |
| `removeCurrentSticker` | 移除当前选中的 sticker |
| `removeAllStickers` | 移除全部 sticker |
| `clearCurrentStickerSelect` | 取消当前选中的 sticker |
| `setLocked` | 禁止拖拽操作 |
| `setOnStickerOperationListener` | 设置 sticker 相关事件监听器 |

### Sticker 属性

| 属性 | 类型 | 说明 |
|:---|:---|:---|
| `id` | string | 贴纸唯一标识 |
| `x` | number | X 坐标 |
| `y` | number | Y 坐标 |
| `scale` | number | 缩放比例 |
| `rotation` | number | 旋转角度 |
| `isFlipped` | boolean | 是否已翻转 |

### TextSticker 特有属性

| 属性 | 类型 | 说明 |
|:---|:---|:---|
| `text` | string | 文字内容 |
| `color` | string | 文字颜色 |
| `fontSize` | number | 字体大小 |
| `alignment` | number | 对齐方式 |

### ImageSticker 特有属性

| 属性 | 类型 | 说明 |
|:---|:---|:---|
| `pixelMap` | PixelMap | 图片像素映射 |
| `imagePath` | string | 图片路径 |
| `isStorage` | boolean | 是否持久化存储 |

## 📁 项目结构

```
StickerView/
├── sticker_view/                 # 贴纸组件库
│   └── src/main/ets/components/  # 组件源码
│       ├── StickerView.ets       # 主组件
│       ├── Sticker.ets           # 贴纸基类
│       ├── TextSticker.ets       # 文字贴纸
│       ├── ImageSticker.ets      # 图片贴纸
│       ├── CanvasUtil.ts         # 画布工具
│       └── StickerUtils.ts       # 贴纸工具类
├── entry/                        # 示例应用
└── oh-package.json5              # 依赖配置
```

## 🤝 贡献

欢迎提交 Pull Request 或 Issue。

## 📄 开源协议

本项目基于 [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0.html) 开源协议。

---

**参考链接**：
- [Gitee 仓库](https://gitee.com/guocheng6/StickerView)
- [HarmonyOS 官方文档](https://developer.harmonyos.com)