## Fabric Texture

[English](README.en.md) | [中文](README.md)

![License](https://img.shields.io/badge/license-MIT-blue.svg)
![Version](https://img.shields.io/badge/version-1.0.0-green.svg)

### 项目介绍

这个JavaScript库帮助你在`Canvas 2D`上高效实现类似3D的图像扭曲变形效果，内置扭曲、透视、倾斜效果。

### 安装方法

```shell
npm install fabric-texture
# or
pnpm add fabric-texture
```

### 工具特性

- **贴图类**：提供`Texture`类，可以快速对`Canvas 2D`图像进行扭曲变形，轻松生成变形后的图像画布。

- **三大内置变形效果**：内置提供了三种扭曲变形效果，包括普通扭曲、透视变形、倾斜变形。

  ![effect-image](./docs/resources/images/effect-image.png)

- **辅助显示效果**：提供选项以在变形图像上添加分隔线和分割点等辅助显示效果，以协助观察图像变形效果。

- **抗锯齿控制**：提供选项以启用或禁用变形图像渲染时的抗锯齿功能，以获得更平滑的视觉效果。

- **控制输入输出尺寸**：提供选项以控制变形图像的输入和输出尺寸，更好把控变形图像的生成质量和效率。

- **快速搭建可视化编辑工具**：提供`FabricTexture`类，该类结合[Fabric.js](https://github.com/fabricjs/fabric.js)，可以基于一个`fabric.Canvas`对象快速搭建可交互的扭曲编辑工具，该工具允许通过可视化交互的方式实现画布图像的变形。
  <div style="display: flex; justify-content: center;">
    <img src="./docs/resources/gifs/skew.gif" alt="skew" style="width: 33%;" />
    <img src="./docs/resources/gifs/warp.gif" alt="warp" style="width: 33%" />
    <img src="./docs/resources/gifs/perspective.gif" alt="perspective" style="width: 33%" />
  </div>

- **自定义主题色**：内置的交互编辑工具，允许配置自定义主题色和第二主题色。

- **支持自定义变形效果**：提供`AbstractMode`类，基于该类可以创建自定义变形效果。

### 使用方式

查看项目的[在线示例](https://example.com)，其中包含更多使用代码讲解，或直接查阅[项目API文档](./docs/apis/README.md)。

### 许可证

此项目使用 MIT 许可证 - 详情请参阅 [LICENSE](LICENSE) 文件。

### 联系方式

huanjinliu - [huanjin.liu@foxmail.com](mailto:huanjin.liu@foxmail.com)