fabric-texture/README.md

This JavaScript library enables fast and efficient image distortion transformations using Canvas 2D.

## Fabric Texture

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

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

### Description

This JavaScript library helps you efficiently achieve 3D-like image distortion effects on Canvas 2D, with built-in warp, perspective, and skew effects.

### Installation

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

### Features

- **Texture Class**: Provides a Texture class that allows quick distortion transformations on Canvas 2D images, easily generating transformed image canvases.
  
- **Three Built-in Transformation Effects**: Offers three built-in distortion effects, including regular warp, perspective transformation, and skew transformation.
  ![effect-image](./docs/resources/images/effect-image.png)

- **Auxiliary Display Effects**: Options to add auxiliary display effects such as dividing lines and split points on the transformed image to assist in observing the image transformation effects.

- **Anti-aliasing Control**: Options to enable or disable anti-aliasing during the rendering of distorted images for smoother visual effects.

- **Control Input and Output Sizes**: Options to control the input and output sizes of the transformed image, better managing the quality and efficiency of the generated transformed image.

- **Quickly Build Visual Editing Tools**: Provides a FabricTexture class that, combined with Fabric.js, allows you to quickly build an interactive distortion editing tool based on a fabric.Canvas object. This tool enables canvas image transformations through visual interactions.
  <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>

- **Custom Theme Colors**: The built-in interactive editing tool allows configuration of custom theme colors and secondary theme colors.

- **Support for Custom Transformation Effects**: Provides an AbstractMode class, based on which you can create custom transformation effects.

### Usage

Check out the [live demo](https://example.com) for more code examples and explanations, or directly refer to the [project API documentation](./docs/api/README.md).
   
### License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

### Contact

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