带翻转的Fabric.js蒙版对象

时间:2018-11-09 19:31:04

标签: fabricjs

我正在使用以下方法使用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();
        }
    });

0 个答案:

没有答案