Блог

Я прочитал несколько сообщений на эту тему, но мне еще предстоит найти решение для моей конкретной проблемы.

Вот plnk;

http://plnkr.co/edit/ScJGKwR74H8UjsaJqfZF?p=preview

Цель здесь в том, чтобы вы могли увеличивать изображение, но изображение всегда остается видимым внутри холста без пробелов при перетаскивании. Проблема действительно возникает в этой части кода;

   obj = e.target;

  obj.setCoords();

  var boundingRect = obj.getBoundingRect();
  var zoom = canvas.getZoom();
  var viewportMatrix = canvas.viewportTransform;

  boundingRect.top = (boundingRect.top - viewportMatrix[5]) / zoom;
  boundingRect.left = (boundingRect.left - viewportMatrix[4]) / zoom;
  boundingRect.width /= zoom;
  boundingRect.height /= zoom;

  var pHeight = obj.canvas.height * zoom,
      pWidth = obj.canvas.width * zoom,
      nHeight = obj.canvas.height - pHeight,
      nWidth = obj.canvas.width - pWidth;

  // top-left  corner
  if (boundingRect.top < nHeight || boundingRect.left < nWidth) {
    obj.top = Math.max(obj.top, nHeight   obj.top - boundingRect.top);
    obj.left = Math.max(obj.left, nWidth   obj.left - boundingRect.left);
  }
  

Когда я нажимаю кнопку масштабирования, я хочу, чтобы выводилось отрицательное число, поскольку я хочу, чтобы изображение перетаскивалось с экрана, но никогда не оставляло пробелов. У меня он работает наполовину, но я не уверен, как его получить, чтобы граничный предел всегда вычислялся для масштабированной версии изображения?

Надеюсь, кто-нибудь может указать, где я ошибаюсь?

Спасибо

Я попытался слегка реорганизовать логику в верхнем левом углу, чтобы она использовала нижний правый угол для предотвращения ее выхода из холста в любом направлении. Это выглядит так:

   var canvasHeight = obj.canvas.height / zoom,
    canvasWidth = obj.canvas.width / zoom,
    rTop = boundingRect.top   boundingRect.height,
    rLeft = boundingRect.left   boundingRect.width;

  // Where top left corner check used to be
  if (rTop < canvasHeight || rLeft < canvasWidth) {
    obj.top = Math.max(obj.top, canvasHeight - boundingRect.height);
    obj.left = Math.max(obj.left, canvasWidth - boundingRect.width);
  }
  

По сути, вместо проверки того, превысила ли верхняя часть изображения разницу в размере холста, он проверяет, оторвалась ли нижняя часть изображения от нижней части увеличенного холста.

http://plnkr.co/edit/cjAWEqrdnL6skKQYsFM2?p=preview