我正在使用以下方法使用Fabric.js
屏蔽对象。翻转对象时,此操作不起作用,将遮罩放置在未翻转对象的情况下。我尝试了很多东西,例如翻转面具本身,都没有成功。
有什么想法吗?
let mask = new fabric.Path(path.path, {
top: object.top,
left: object.left,
objectCaching: false,
strokeWidth: 0,
scaleX: 1 / object.scaleX,
scaleY: 1 / object.scaleY,
pathOffset: {
x: 0,
y: 0
}
});
object.clipMask = mask;
object.originalObjectTop = object.top;
object.originalObjectLeft = object.left;
object.originalObjectWidth = object.width;
object.originalObjectHeight = object.height;
object.originalObjectScaleX = object.scaleX;
object.originalObjectScaleY = object.scaleY;
object.originalObjectAngle = object.angle;
object.originalMaskScaleX = mask.scaleX;
object.originalMaskScaleY = mask.scaleY;
let transformedTranslate = object.translateToGivenOrigin(
{
x: object.left,
y: object.top
},
object.originX,
object.originY,
"center",
"center"
);
object.originalObjectTransformTop = transformedTranslate.y - object.getCenterPoint().y;
object.originalObjectTransformLeft = transformedTranslate.x - object.getCenterPoint().x;
object.set({
clipTo: function(ctx) {
ctx.save();
ctx.rotate((-this.originalObjectAngle * Math.PI) / 180);
ctx.translate(this.originalObjectTransformLeft / this.originalObjectScaleX, this.originalObjectTransformTop / this.originalObjectScaleY);
this.clipMask.set({
left: -this.originalObjectWidth / 2 - (this.clipMask.width / 2) * this.originalMaskScaleX - this.originalObjectLeft / this.originalObjectScaleX,
top: -this.originalObjectHeight / 2 - (this.clipMask.height / 2) * this.originalMaskScaleY - this.originalObjectTop / this.originalObjectScaleY,
objectCaching: false,
fill: "rgba(0,0,0,0)"
});
this.clipMask.render(ctx);
ctx.restore();
}
});