Поворот, наклон, масштабирование и изменение размера маски вместе с объектом - PullRequest
Новая
       6

Поворот, наклон, масштабирование и изменение размера маски вместе с объектом

0 голосов
/ 01 октября 2018

fabric.js 2.3.6

Я пытаюсь дублировать любые преобразования, примененные к объекту, к маске над ним.

Мне удалось переместить маску с помощьюобъект, но любые преобразования, примененные к маске, не работают, например mask.set({ angle: object.angle }).setCoords();

https://jsfiddle.net/30hj5xk2

Thx.

1 Ответ

0 голосов
/ 02 октября 2018

Пожалуйста, проверьте здесь: https://jsfiddle.net/o91rv38q/41/

    // canvas

let canvas = new fabric.Canvas("canvas", {
  backgroundColor: "lightgray",
  width: 1280,
  height: 720,
  preserveObjectStacking: true,
  selection: false,
  stateful: true
});

canvas.isDrawingMode = true;
canvas.freeDrawingBrush.color = "black";
canvas.freeDrawingBrush.width = 2;

canvas.on("path:created", function(options) {
   clip(options.path);
});

function clip(path) {

  canvas.isDrawingMode = false;
  canvas.remove(path);

  let mask = new fabric.Path(path.path, {
    top: object.top,
    left: object.left,
    objectCaching: false,
    strokeWidth:0,
    pathOffset: {
      x: 0,
      y: 0
    }
  });

  object.set({
    clipTo: function(ctx) {

        mask.set({ 
                        left: -object.width/2-mask.width/2, 
                        top: -object.height/2-mask.height/2,
                        objectCaching: false
                    });
            mask.render(ctx);

    }
  });

  this.canvas.requestRenderAll();

}

// image

let image = new Image();
let object;

image.onload = function() {

  object = new fabric.Image(image, {
    width: 500,
    height: 500,
    top: 0,
    left: 0
  });

  canvas.add(object);

};

image.src = "http://i.imgur.com/8rmMZI3.jpg";

ОБНОВЛЕНИЕ Проблема не в масштабировании холста.Проблема заключалась в том, что вам нужно принять во внимание object.left и object.top, прежде чем надеть маску на object.Я сохранил прямо перед тем, как вы положили mask на object и использовал для уменьшения mask.left и mask.top Проверьте здесь: http://jsfiddle.net/mariusturcu93/30hj5xk2/10/

JS 

// canvas

let canvas = new fabric.Canvas("canvas", {
  backgroundColor: "lightgray",
  width: 1280,
  height: 720,
  preserveObjectStacking: true,
  selection: false,
  stateful: true
});

canvas.isDrawingMode = true;
canvas.freeDrawingBrush.color = "black";
canvas.freeDrawingBrush.width = 2;

window.addEventListener("resize", () => {
  resize();
});

canvas.on("path:created", function(options) {
   clip(options.path);
});

function resize() {
  let canvasWrapper = document.querySelector(".canvas__wrapper");

  let canvasWrapperWidth = canvasWrapper.offsetWidth;
  let canvasWrapperHeight = canvasWrapper.offsetHeight;
  let canvasWrapperRatio = canvasWrapperWidth / canvasWrapperHeight;

  let canvasZoom = canvas.getZoom();
  let canvasRatio = canvas.getWidth() / canvas.getHeight();

  let scale;

  if (canvasWrapperRatio < canvasRatio) {
    scale = canvasWrapperWidth / canvas.getWidth();
    canvasWrapperHeight = canvasWrapperWidth / canvasRatio;
  } else {
    scale = canvasWrapperHeight / canvas.getHeight();
    canvasWrapperWidth = canvasWrapperHeight * canvasRatio;
  }

  scale *= canvasZoom;

  canvas.setDimensions({
    width: canvasWrapperWidth,
    height: canvasWrapperHeight
  });

  canvas.setViewportTransform([scale, 0, 0, scale, 0, 0]);
  console.log(canvas.viewportTransform);
}

resize();

function clip(path) {

  canvas.isDrawingMode = false;
  canvas.remove(path);

  let scale = canvas.getZoom();

  console.log(scale)

  let mask = new fabric.Path(path.path, {
    top: object.top,
    left: object.left,
    objectCaching: false,
    strokeWidth:0,
    pathOffset: {
      x: 0,
      y: 0
    }
  });
    var originalObjLeft = object.left,
  originalObjTop  = object.top;
  object.set({
    clipTo: function(ctx) {

        mask.set({ 
                        left: -object.width/2-mask.width/2-originalObjLeft, 
                        top: -object.height/2-mask.height/2-originalObjTop,
                        objectCaching: false
                    });
            mask.render(ctx);

    }
  });

  canvas.requestRenderAll();

}

// image

let image = new Image();
let object;

image.onload = function() {

  object = new fabric.Image(image, {
    width: 500,
    height: 500,
    top: 20,
    left: 20
  });

  canvas.add(object);

};

image.src = "http://i.imgur.com/8rmMZI3.jpg";
...