在包含区域内动态移动创建分组对象?(html5canvas - fabric.js)

我想创建的是一个小的画布小部件，它允许用户动态地在图像上创建一个形状，然后将其放置在吸引他们兴趣的区域上方，实际上它是一个荧光笔。

问题是添加缩放功能，因为当我缩放图像时，我想确保;

1. 动态创建的形状是不可能的拖动到图像区域以外的任何地方。(基本完成，依赖第二步)
2. 您不能将图像拖出页面视图，画布区域不能显示空白。必须始终显示图像的一部分，并填充整个画布区域。(问题)

---

这是我写的两个例子，它们都不能正常工作;

第一个例子- getBoundingRect不更新并且被绑定到图像

第二个例子- getBoundingRect更新并绑定到分组对象

从链接描述中您可以看到，我认为我已经缩小了问题范围，或者至少注意到脚本与getBoundingRect行为之间的关键差异。

第一个砰的一声似乎工作得很好，直到你尝试多次放大和更大的缩放级别，然后它似乎开始出现故障(可能需要几次点击和一点混乱，这是非常不一致的)。第二根电线很不稳定，不能很好地工作。

我已经被这个问题困了一个星期了，我已经到了崩溃的边缘了!所以真的希望有人指出我做错了什么吗?

第一个plunk的代码片段;

  // creates group
  var objs = canvas.getObjects();

  var group = new fabric.Group(objs, {
    status: 'moving'
  });
  // sets grouped object position
  var originalX = active.left,
    originalY = active.top,
    mouseX = evt.e.pageX,
    mouseY = evt.e.pageY;
  active.on('moving', function(evt) {
    group.left += evt.e.pageX - mouseX;
    group.top += evt.e.pageY - mouseY;
    active.left = originalX;
    active.top = originalY;
    originalX = active.left;
    originalY = active.top;
    mouseX = evt.e.pageX;
    mouseY = evt.e.pageY;

    // sets boundary area for image when zoomed
    // THIS IS THE PART THAT DOESN'T WORK
    active.setCoords();
    // SET BOUNDING RECT TO 'active'
    var boundingRect = active.getBoundingRect();
    var zoom = canvas.getZoom();
    var viewportMatrix = canvas.viewportTransform;
    // scales bounding rect when zoomed
    boundingRect.top = (boundingRect.top - viewportMatrix[5]) / zoom;
    boundingRect.left = (boundingRect.left - viewportMatrix[4]) / zoom;
    boundingRect.width /= zoom;
    boundingRect.height /= zoom;
    var canvasHeight = canvas.height / zoom,
      canvasWidth = canvas.width / zoom,
      rTop = boundingRect.top + boundingRect.height,
      rLeft = boundingRect.left + boundingRect.width;
    // checks top left
    if (rTop < canvasHeight || rLeft < canvasWidth) {
      group.top = Math.max(group.top, canvasHeight - boundingRect.height);
      group.left = Math.max(group.left, canvasWidth - boundingRect.width);
    }
    // checks bottom right
    if (rTop > 0 || rLeft > 0) {
      group.top = Math.min(group.top, canvas.height - boundingRect.height + active.top - boundingRect.top);
      group.left = Math.min(group.left, canvas.width - boundingRect.width + active.left - boundingRect.left);
    }

  });
  // deactivates all objects on mouseup
  active.on('mouseup', function() {
    active.off('moving');
    canvas.deactivateAll().renderAll();
  })
  // sets group
  canvas.setActiveGroup(group.setCoords()).renderAll();

}

---

编辑:

我已经添加了注释，并试图简化的代码在plunks。

相关代码从if (active.id == "img") {代码块开始。

我把不相关的代码作为函数放在底部，它们基本上可以被忽略。(createNewRect() + preventRectFromLeaving())

为了避免混淆，我已经去掉了一个按键。

让我知道它是否有帮助，或者如果我应该尝试进一步简化。

谢谢!

var lastLeft = active.left,
    lastTop = active.top;

rect.left += active.left - lastLeft;
rect.top += active.top - lastTop;
// I think this is needed so the rectangle can be re-selected
rect.setCoords();
lastLeft = active.left;
lastTop = active.top;