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

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

import { Texture } from 'fabric-texture';
import Perspective from 'fabric-texture/modes/perspective';

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

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

// 修改左上角顶点坐标(相对于源图像)
texture.setVertexCoord(0, 0, 'tl', {
  x: /*-x0-*/ 0 /**/, // 水平相对位置
  y: /*-y0-*/ 0 /**/, // 垂直相对位置
});

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