Fabric.js маскирует объект флипом - PullRequest
Новая
       5

Fabric.js маскирует объект флипом

0 голосов
/ 09 ноября 2018

Я использую следующий метод для маскировки объекта, используя 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();
        }
    });
...