如何在FabricJS中将一个对象约束在另一个对象内

Question

我正在尝试将一个对象限制在另一个对象的内部。如果我将对象 A 作为父对象，将对象 B 作为子对象，则会创建对象 B 以匹配当前的顶部，左侧，宽度，父级 A 的高度，角度。

对象 B 可以缩放，但不能移动或旋转，并且必须保留在对象 A 内。

我基本上可以正常工作...但是在创建和操作对象 B 之前旋转对象 A 时，计算会中断。

无论父对象旋转如何，如何计算约束子对象？

以下是代码的内容：（其余部分实际上是样板，可以在下面的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/