Запретить масштабирование вне фона - fabric.js - PullRequest
Новая
       19

Запретить масштабирование вне фона - fabric.js

0 голосов
/ 17 июня 2019

Я использую fabric.js для создания холста с фоном.Я хочу добавить масштаб и следую этому руководству .

Но при использовании .zoomToPoint() с фоном, оно может быть выровнено и отображать белый пустой холст.Попробуйте сами в моем jsfiddle или внизу, уменьшив масштаб сначала с помощью мыши в правом нижнем углу, а затем уменьшив масштаб с помощью мыши в правом верхнем углу.Это приводит к тому, что изображение находится только в верхней левой части холста.

Я полагаю, что 1000 можно изменить на что-то, связанное с шириной и высотой изображения или холста.

Спасибо заваша помощь.

Пример минимального кода: 

canvas=new fabric.Canvas("mycanvas")
fabric.Image.fromURL("https://images.unsplash.com/photo-1488330890490-c291ecf62571?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80", function(img) {
         // add background image
         canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas), {
            scaleX: canvas.width / img.width,
            scaleY: canvas.height / img.height
         });
      });
      
canvas.on('mouse:wheel', function(opt) {
var delta = opt.e.deltaY;
var zoom = canvas.getZoom();
zoom = zoom + delta/200;
if (zoom > 20) zoom = 20;
if (zoom < 1) zoom = 1;
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) {
  this.viewportTransform[4] = 200 - 1000 * zoom / 2;
  this.viewportTransform[5] = 200 - 1000 * zoom / 2;
} else {
  if (vpt[4] >= 0) {
    this.viewportTransform[4] = 0;
  } else if (vpt[4] < canvas.getWidth() - 1000 * zoom) {
    this.viewportTransform[4] = canvas.getWidth() - 1000 * zoom;
  }
  if (vpt[5] >= 0) {
    this.viewportTransform[5] = 0;
  } else if (vpt[5] < canvas.getHeight() - 1000 * zoom) {
    this.viewportTransform[5] = canvas.getHeight() - 1000 * zoom;
  }
}});
#mycanvas{
  border: black solid 1px;
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.1.0/fabric.min.js"></script>
<canvas width="500px" height="300px" id="mycanvas"></canvas>

1 Ответ

1 голос
/ 21 июня 2019

Хитрость заключается в том, чтобы проверить, когда область просмотра выходит за границы, и исправить это.

Измените этот общий 1000 с размером изображения при текущем увеличении, чтобы он работал. 

canvas=new fabric.Canvas("mycanvas")
var imgWidth, imgHeight
fabric.Image.fromURL("https://images.unsplash.com/photo-1488330890490-c291ecf62571?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80", function(img) {
         // add background image
         canvas.setBackgroundImage(img, function() {
         canvas.requestRenderAll();
         imgWidth = img.width * img.scaleX;
         imgHeight = img.height * img.scaleY;
         }, {
            scaleX: canvas.width / img.width,
            scaleY: canvas.height / img.height
         });
      });
      
canvas.on('mouse:wheel', function(opt) {
var delta = opt.e.deltaY;
var zoom = canvas.getZoom();
zoom = zoom + delta/200;
if (zoom > 20) zoom = 20;
if (zoom < 1) zoom = 1;
canvas.zoomToPoint({ x: opt.e.offsetX, y: opt.e.offsetY }, zoom);
opt.e.preventDefault();
opt.e.stopPropagation();
var vpt = this.viewportTransform;
if (vpt[4] >= 0) {
  this.viewportTransform[4] = 0;
} else if (vpt[4] < canvas.getWidth() - imgWidth * zoom) {
  this.viewportTransform[4] = canvas.getWidth() - imgWidth * zoom;
}
if (vpt[5] >= 0) {
  this.viewportTransform[5] = 0;
} else if (vpt[5] < canvas.getHeight() - imgHeight * zoom) {
  this.viewportTransform[5] = canvas.getHeight() - imgHeight * zoom;
}
});
#mycanvas{
  border: black solid 1px;
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.1.0/fabric.min.js"></script>
<canvas width="500px" height="300px" id="mycanvas"></canvas>
...