javascript - FabricJS ClipTo 针对多个对象(例如组)的问题

Question

我的代码是

canvas.clipTo = function (ctx) {

    ctx.beginPath();
    for (var i = 0; i < totalPrintArea; i++) {
        ctx.save();
        ctx.fillStyle = 'rgba(51,51,51,0)';
        ctx.rect(clipLft[i], clipTp[i], clipW[i], clipH[i], 'rgba(51,51,51,1)', clipRtn[i]);
        ctx.stroke();
        ctx.restore();
    }

    ctx.closePath();
    ctx.clip();
    canvas.calcOffset();
};
canvas.renderAll();

我从红色虚线框中获取值并应用于生成多个蒙版的剪辑。

我的问题是它获取所有属性，但不旋转所有属性。

我想旋转所有矩形。

我只是得到一些代码来更改剪辑的旋转，如ctx.rotate(50);，但不会工作，因为我想让所有内容都以其自己的值旋转

请指导我。

Answer 1

在原来的fabricJS github项目上我看到了评论:https://github.com/kangax/fabric.js/issues/932#issuecomment-27223912

并决定我需要始终阻止制作 ctx.beginPath:

canvas.clipTo = function(ctx) { 
var skip = false;
// Workaround to make possible 
// making clipTo with 
// fabric.Group 
var oldBeginPath = ctx.beginPath;
ctx.beginPath = function() {
if (!skip) {
  oldBeginPath.apply(this, arguments);
  skip = true;
  setTimeout(function() {
    skip = false;
  }, 0);
}
}
group.render(ctx)
};

您可以查看我所描述的问题的解决方法: https://jsfiddle.net/freelast/6o0o07p7/

解决方法并不完美，但希望对某人有所帮助。