开源 | Fabric.js 实现元素扭曲

36 阅读1分钟

Fabric Warpvas

帮助你在 Fabric.js 上高效构建图像变形工具。

在线文档

示例空白无法访问,请科学上网,或进入在线文档查看。

「扭曲模式·交互说明」

  1. 拖动交互点实现扭曲点的变换,支持框选
  2. 点击内部区域,会出现临时交互点
  3. 拖动临时交互点实现整体移动
  4. 点击临时交互点实现变形区域分割
  5. 选中交互点后点击Delete实现扭曲点的删除(PS:四个原始对角交互点无法被删除)

注意:它支持所有继承于FabricObjectfabric元素,但为保护源目标元素不被错误修改,元素进入变形操作后实际是使用该元素的画布图像target.toCanvasElement()作为变形图像,源目标元素会原封不动地保留在画布中,如果需要,你需要将其隐藏,并在变形完成后采用新的配置或新的元素替换它。

如果能帮助到你,希望能得到你的⭐️。