fabric-texture/docs/sections/quick-start/codes/interactive-canvas-demo.ts

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

import { FabricTexture, Texture } from 'fabric-texture';
import { fabric } from 'fabric';
import Skew from 'fabric-texture/modes/skew'
import Perspective from 'fabric-texture/modes/perspective'
import Warp from 'fabric-texture/modes/warp'

// 内置交互模式
const modes = {
  Warp,        // 扭曲模式
  Skew,        // 倾斜模式
  Perspective, // 透视模式
};

// 创建fabric画布对象
const canvas = document.createElement('canvas');
const fabricCanvas = new fabric.Canvas(canvas);

// 创建FabricTexture对象并进入交互态
const fabricTexture = new FabricTexture(fabricCanvas);
fabricTexture.enterEditing(
  new fabric.Object(), // 参考fabric元素对象
  null, // 贴图画布，如果为null则使用参考元素所在的画布对象
  new modes./*-mode-*/ Perspective /**/(), // 交互模式
  // 如果需要调整渲染配置可以在首次渲染前的回调中进行配置
  (texture: Texture) => {
    texture.setRenderOptions({
      showGrid: /*-show-grid-*/ false /**/,
    });
  },
);

// 如果需要在首次渲染回调外调整配置那需要手动触发交互类的更新渲染才能看到正确效果
// texture.setRenderOptions({});
// fabricTexture.render();