fabric-texture/docs/sections/advanced-usage/codes/realize-convex-mode.ts

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

import { fabric } from 'fabric';
import { FabricTexture } from 'fabric-texture';
import { ConvexMode } from /*-import-url-*/ '../demos/01-customization' /**/;

// 创建交互画布，此处简化了代码
const canvas = new fabric.Canvas(document.createElement('canvas'));

// 创建元素，此处简化了代码
const object = new fabric.Image(new Image());

// 进入交互态
const fabricTexture = new FabricTexture(canvas);
fabricTexture.enterEditing(
  object, // 用作参考配置（如坐标、缩放等）的对象
  null, // 为null则使用前一个参数 object 作为贴图图像
  // 应用凸面交互模式
  new ConvexMode(
    /*-radius-*/ 100 /**/, // 凸面半径
    /*-level-*/ 3 /**/, // 凸面程度
  ),
  // 在渲染变形前执行该回调，可用于补充贴图渲染参数
  (texture) => {
    texture.setRenderOptions({
      padding: /*-padding-*/ 60 /**/, // 四周留白区域
      showGridDot: /*-show-grid-dot-*/ true /**/, // 显示分割点
    });
  },
);