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

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

import { Texture } from 'fabric-texture';
import Warp from 'fabric-texture/modes/warp';

// canvas是填充图形后的画布对象
const canvas = document.createElement('canvas');
const texture = new Texture(canvas);

// 设置分割点计算策略
texture.setSplitStrategy({
  // 应用的策略名称，为自定义名称标识，便于后续查询
  name: /*-mode-name-*/ 'WARP' /**/,
  execute: Warp.execute,
});

// 修改顶边四个控制点的坐标(相对于源图像)
texture.setBoundCoords(0, 0, 'top', [
  { x: /*-x0-*/ 0 /**/, y: /*-y0-*/ 0 /**/ }, // 左上坐标
  { x: /*-x1-*/ 0 /**/, y: /*-y1-*/ 0 /**/ }, // 曲线控制点1坐标
  { x: /*-x2-*/ 0 /**/, y: /*-y2-*/ 0 /**/ }, // 曲线控制点2坐标
  { x: /*-x3-*/ 0 /**/, y: /*-y3-*/ 0 /**/ }, // 右上坐标
]);

// 渲染并返回变形后的画布对象
const textureCanvas = texture.create();