fabric-warpvas
Version:
This JavaScript library helps you efficiently build image warping tools on Fabric.js
28 lines (25 loc) • 950 B
text/typescript
import { FabricWarpvas } from 'fabric-warpvas';
import { fabric } from 'fabric';
import Warp from 'fabric-warpvas/modes/warp';
const canvas = document.createElement('canvas');
const fabricCanvas = new fabric.Canvas(canvas);
const fabricWarpvas = new FabricWarpvas(fabricCanvas);
/*---*/
// 进入扭曲变形
fabricWarpvas.enterEditing(
new fabric.Image(new Image()),
null,
new Warp(),
// 在回调中进行初始化配置
(warpvas) => {
warpvas.setRenderingConfig({
enableGridDisplay: /*-show-grid-*/ false /**/, // 是否显示分割线
enableGridVertexDisplay: /*-show-grid-dot-*/ false /**/, // 是否显示分割点
enableContentDisplay: /*-show-texture-*/ false /**/, // 是否显示图像
});
},
);
// 当然也支持在回调外动态配置，不过需要手动触发渲染更新
// fabricWarpvas.warpvas?.setRenderingConfig({ ... })
// fabricWarpvas.requestRender()
/*---*/