Как ограничить панорамирование холста в Fabric JS?

Вот ссылка на инструкцию с оф сайта: http://fabricjs.com/fabric-intro-part-5.

Но у меня почему то не получается ограничить панорамирование.

Изначальный зум установлен

canvas.setZoom(1);

Реализованы захват по кнопке, как в статье

canvas.on('mouse:down', function(opt) {
   var evt = opt.e;
  if (evt.ctrlKey === true) {
   this.isDragging = true;
   this.selection = false;
   this.lastPosX = evt.clientX;
   this.lastPosY = evt.clientY;
   }
  });
  canvas.on('mouse:move', function(opt) {
   if (this.isDragging) {
   var e = opt.e;
  var vpt = this.viewportTransform;
   vpt[4] += e.clientX - this.lastPosX;
   vpt[5] += e.clientY - this.lastPosY;
   this.requestRenderAll();
   this.lastPosX = e.clientX;
   this.lastPosY = e.clientY;
   }
  });
  canvas.on('mouse:up', function(opt) {
  this.setViewportTransform(this.viewportTransform);
   this.isDragging = false;
   this.selection = true;
  });

Но когда я вставляю кусок скрипта из статьи, отвечающий за ограничение панорамирования - он не работает.

//zoom and panning
  canvas.on('mouse:wheel', function(opt) {
   var delta = opt.e.deltaY;
   var zoom = canvas.getZoom();
   zoom *= 0.999 ** delta;
   if (zoom > 20) zoom = 20;
   if (zoom < 0.01) zoom = 0.01;
   canvas.zoomToPoint({ x: opt.e.offsetX, y: opt.e.offsetY }, zoom);
   opt.e.preventDefault();
   opt.e.stopPropagation();
 });
 
 canvas.on('mouse:wheel', function(opt) {
  var delta = opt.e.deltaY;
  var zoom = canvas.getZoom();
  zoom *= 0.999 ** delta;
  if (zoom > 20) zoom = 20;
  if (zoom < 0.01) zoom = 0.01;
  canvas.zoomToPoint({ x: opt.e.offsetX, y: opt.e.offsetY }, zoom);
  opt.e.preventDefault();
  opt.e.stopPropagation();
  var vpt = this.viewportTransform;
  if (zoom < 400 / 1000) {
    vpt[4] = 200 - 1000 * zoom / 2;
    vpt[5] = 200 - 1000 * zoom / 2;
  } else {
    if (vpt[4] >= 0) {
      vpt[4] = 0;
    } else if (vpt[4] < canvas.getWidth() - 1000 * zoom) {
      vpt[4] = canvas.getWidth() - 1000 * zoom;
    }
    if (vpt[5] >= 0) {
      vpt[5] = 0;
    } else if (vpt[5] < canvas.getHeight() - 1000 * zoom) {
      vpt[5] = canvas.getHeight() - 1000 * zoom;
    }
  }})

Не происходит ограничения канваса страницей и весь канвас можно утащить через драг вне страницы. Что я делаю не так?


Ответы (0 шт):