fabric.js 中文教程第五部分

在之前的系列中，我们已经讨论了很多主题；从基本对象操作到动画、事件、过滤器、组和子类。但仍有一些非常有趣和有用的事情需要讨论！

缩放和平移

让我们来看看如何通过鼠标交互实现缩放和平移的基本系统。我们将使用鼠标滚轮在画布上放大到20倍（2000%），并使用alt+单击操作进行拖动。

我们开始基本控制：

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.setZoom(zoom);
  opt.e.preventDefault();
  opt.e.stopPropagation();
})

查看demo

这是一个基本的缩放控制，限制在1%和2000%之间。现在我们想添加画布的拖动。我们将使用ALT+DRAG，但您可以更改为其他组合。这个想法是，带有alt的mousedown会将布尔值设置为true，这样鼠标移动事件就可以理解拖动的事件了。

canvas.on('mouse:down', function(opt) {
  var evt = opt.e;
  if (evt.altKey === 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) {
  // on mouse up we want to recalculate new interaction
  // for all objects, so we call setViewportTransform
  this.setViewportTransform(this.viewportTransform);
  this.isDragging = false;
  this.selection = true;
});  

查看demo

好的，这是一个基本设置，允许您控制缩放和平移。还有一些可能的增强。
例如，当我们使用滚轮缩放时，我们可以使画布以当前光标所在的点为中心进行缩放：

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();
});

查看demo

最后，我们可以限制平移区域，以避免视图在一个方向上无限远。我们绘制一个1000x1000像素的矩形，它将代表我们的平移区域。我们添加了代码来限制边界的移动：

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;
  }
})

查看demo