Fabric.js:窗口大小调整问题

Fabric.js 是一个强大的 HTML5 Canvas 库，它提供了丰富的交互式对象模型，使得开发者可以轻松地在 Canvas 上创建、修改和渲染图形对象。当涉及到窗口大小调整时，可能会遇到一些问题，比如画布内容没有正确地缩放或者重置，导致显示不正确。

基础概念

• Canvas: HTML5 中的一个元素，用于在网页上绘制图形。
• Fabric.js: 一个基于 Canvas 的 JavaScript 库，提供了对象模型来处理图形对象。
• 窗口大小调整事件: 当浏览器窗口大小改变时触发的事件，通常使用 resize 事件监听。

相关优势

• 交互性: Fabric.js 提供了丰富的交互功能，如拖拽、缩放、旋转等。
• 对象模型: 每个图形对象都是一个 JavaScript 对象，易于管理和操作。
• 状态保存: 可以轻松地保存和恢复画布的状态。

类型

• 基本图形: 如矩形、圆形、线条等。
• 复杂对象: 如多边形、文本、图片等。
• 组合对象: 可以将多个对象组合成一个新对象进行操作。

应用场景

• 在线绘图工具: 如流程图、思维导图制作。
• 电商网站: 商品展示的模特试穿效果。
• 教育平台: 互动式教学材料。

窗口大小调整问题的原因及解决方法

问题原因: 当浏览器窗口大小发生变化时，Canvas 的尺寸可能不会自动适应新的窗口大小，导致画布上的内容显示不正确或者比例失调。

解决方法:

1. 监听窗口大小变化事件: 使用 JavaScript 监听 resize 事件，并在事件触发时调整 Canvas 的尺寸。
2. 重置画布: 在调整 Canvas 尺寸后，需要重新设置画布的视口和渲染区域。
3. 缩放对象: 如果需要保持画布内容的相对大小不变，可以在窗口大小变化时对画布上的对象进行缩放。

示例代码:

// 初始化 Fabric.js 画布
var canvas = new fabric.Canvas('canvas');

// 监听窗口大小变化事件
window.addEventListener('resize', function() {
    // 调整 Canvas 尺寸以适应新的窗口大小
    canvas.setWidth(window.innerWidth);
    canvas.setHeight(window.innerHeight);

    // 重置画布的渲染区域
    canvas.renderAll();

    // 如果需要保持对象的相对大小，可以进行缩放
    var objects = canvas.getObjects();
    objects.forEach(function(obj) {
        // 根据新的窗口大小调整对象的大小
        obj.scaleToWidth(window.innerWidth / oldWidth); // oldWidth 是之前的窗口宽度
        obj.scaleToHeight(window.innerHeight / oldHeight); // oldHeight 是之前的窗口高度
    });

    // 更新画布状态
    canvas.renderAll();
});

// 记录初始窗口大小
var oldWidth = window.innerWidth;
var oldHeight = window.innerHeight;

通过上述方法，可以确保 Fabric.js 画布在窗口大小变化时能够正确地调整尺寸和内容，保持良好的用户体验。