ikuaitu / vue-fabric-editor

快图设计-基于fabric.js和Vue的开源图片编辑器,可自定义字体、素材、设计模板。fabric.js and Vue based image editor, can customize fonts, materials, design templates.
https://ikuaitu.github.io/doc/#/
MIT License
4.87k stars 911 forks source link

裁剪功能:先旋转素材,然后加入裁剪图形,完成后,裁剪图形位置和旋转都非编辑时的效果 #501

Open momo2019 opened 1 month ago

momo2019 commented 1 month ago

需要修改SimpleClipImagePlugin.ts代码

shell.on('deselected', 中加入clipPath.rotate((clipPath.angle || 0) - (activeObject.angle || 0));

shell.on('deselected', () => {
  if (clipPath instanceof fabric.Ellipse && shell instanceof fabric.Ellipse) {
    // .....
  }
  clipPath.rotate((clipPath.angle || 0) - (activeObject.angle || 0)); // 加入这行代码
  activeObject.set('dirty', true);
  this.canvas.remove(shell);
  this.canvas.requestRenderAll();
});

需要使用裁剪原本的旋转值和消除素材的旋转值带来的影响。

示例视频