Как ограничить один объект внутри другого в FabricJS - PullRequest
Новая
       10

Как ограничить один объект внутри другого в FabricJS

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

Я пытаюсь заставить один объект быть ограниченным внутри другого.Если у меня есть объект A в качестве родителя и объект B в качестве дочернего объекта, объект B создается в соответствии с текущей вершиной, слева, шириной, высотой, угломего родителя A .

Объект B можно масштабировать, но нельзя перемещать или поворачивать, и он должен оставаться внутри объекта A .

У меня это в основном работает ..... но мои вычисления прерываются, когда объект A вращается перед созданием и манипулированием объектом B .

Как рассчитать ограничение дочернего объекта независимо от его родителявращение, и т. д.

Вот основная часть кода: (остальное действительно шаблонно и можно найти в jsfiddle ниже.) 

function start() {
  if (typeof window.controls != "undefined") {
    return;
  }

  let image = window.canvas.getActiveObject();

  let imageWidth = image.getScaledWidth();
  let imageHeight = image.getScaledHeight();

  let controls = new fabric.Rect({
    width: imageWidth,
    height: imageHeight,
    top: image.top,
    left: image.left,
    angle: image.angle,
    fill: "rgba(0, 0, 0, 0.2)",
    cornerColor: "rgba(0, 0, 0, 0.9)",
    lockMovementX: true,
    lockMovementY: true,
    lockScalingFlip: true
  });

  controls.setControlsVisibility({
    mtr: false
  })

  // constrain controls to inside of existing image
  controls.on('scaling', () => {
    controls.setCoords()

    if (controls.top < image.top || controls.left < image.left) {
      controls.top = Math.max(controls.top, image.top);
      controls.left = Math.max(controls.left, image.left);
    }

    let maxW = imageWidth - (controls.left - image.left);
    let maxH = imageHeight - (controls.top - image.top);

    let maxScaleX = maxW / imageWidth;
    let maxScaleY = maxH / imageHeight;

    if (controls.scaleX > maxScaleX) {
      controls.scaleX = maxScaleX;
    }

    if (controls.scaleY > maxScaleY) {
      controls.scaleY = maxScaleY;
    }

  });

  window.canvas.add(controls);
  window.controls = controls;

  window.canvas.setActiveObject(controls);
  window.canvas.renderAll();
};

Скрипка здесь: http://jsfiddle.net/nateevans/Lzcjb7oe/

constrain object

...