控制FabricJS中的缩小视图窗口

要控制FabricJS中的缩小视图窗口，可以使用以下代码示例：

HTML部分：

<canvas id="canvas"></canvas>
<button id="zoom-in">Zoom In</button>
<button id="zoom-out">Zoom Out</button>

JavaScript部分：

// 创建Canvas对象
var canvas = new fabric.Canvas('canvas');

// 添加一个矩形对象到Canvas
var rect = new fabric.Rect({
  left: 100,
  top: 100,
  width: 200,
  height: 200,
  fill: 'red'
});
canvas.add(rect);

// 设置初始缩放级别
var zoomLevel = 1;

// 缩小视图窗口函数
function zoomOut() {
  zoomLevel -= 0.1;
  canvas.setZoom(zoomLevel);
  canvas.renderAll();
}

// 放大视图窗口函数
function zoomIn() {
  zoomLevel += 0.1;
  canvas.setZoom(zoomLevel);
  canvas.renderAll();
}

// 监听缩小按钮点击事件
document.getElementById('zoom-out').addEventListener('click', zoomOut);

// 监听放大按钮点击事件
document.getElementById('zoom-in').addEventListener('click', zoomIn);

在上面的代码中，我们首先创建了一个Canvas对象，并添加了一个矩形对象到Canvas中。然后，我们定义了一个zoomLevel变量来存储当前的缩放级别，并设置初始值为1。

接下来，我们定义了一个zoomOut函数，它会将zoomLevel减小0.1，并通过canvas.setZoom()方法将缩放级别应用到Canvas上。然后，调用canvas.renderAll()方法来重新渲染Canvas。

类似地，我们定义了一个zoomIn函数，它会将zoomLevel增加0.1，并应用到Canvas上。

最后，我们通过addEventListener方法监听了缩小和放大按钮的点击事件，并分别调用对应的函数来实现缩小和放大视图窗口的功能。