缩放和平移，FabricJS 简介第 5 部分
在上一个系列中，我们已经讨论了很多主题；从基本的对象操作到动画、事件、过滤器、组和子类。但是仍然有一些非常有趣和有用的事情要讨论！
缩放和平移
让我们看看如何通过鼠标交互实现一个基本的缩放和平移系统。我们将使用鼠标滚轮在画布上放大 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();})这是一个基本的缩放控制，限制在 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;});好的，这是一个基本设置，可让您控制缩放和平移。仍有一些可能的增强功能。
例如，我们可以进行滚轮缩放以使画布围绕光标所在的点居中：
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();});作为最后一点，我们可以限制平移区域以避免视图在一个方向无限远。我们画一个 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;
}})
查看更多关于缩放和平移，FabricJS 简介第 5 部分的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did31468