在 Fabric.js开发时，可能会遇到要显示的完整视图尺寸超过了 canvas 大小的情况。比如下面样例，我们生成 20 个方块，每个方块的位置都是随机的。由于 canvas 大小固定，可能就会造成有些方块落在显示区域外，看不到。

碰到这种情况，一方面我们要提供个画布拖拽和缩放的功能，具体可以参考我之前的文章：Fabric.js - 实现鼠标拖动画布、滚轮缩放画布的功能。另一方面最好让整个视图一开始就自动缩放，让 canvas 刚好能显示下全部的内容。

一、让视图自动缩放以适应 Canvas(Canvas 固定大小)

1，实现原理

首先我们遍历所有的对象，获取所有对象左上角坐标的最小值，以及所有对象右下角坐标的最大值。

接着根据上面的值以及 Canvas 的宽高，计算出缩放比例以及平移的距离，并对 Canvas 的视图(Viewport)进行平移和缩放操作。

2，样例代码

var canvas;

$(function() {

canvas = new fabric.Canvas('canvas',{backgroundColor: '#D6F8FF'});

//创建随机的方块

for(var i=0; i<20; i++){

var left = (Math.random() - 0.5) * 600;

var top = (Math.random() - 0.5) * 600;

var rect = new fabric.Rect({top: top, left: left, width: 70, height: 70, fill: 'orange'});

canvas.add(rect);

//缩放移动视图，使其适应Canvas大小

zoomToFitCanvas();

//缩放移动视图，使其适应Canvas大小

function zoomToFitCanvas() {

//遍历所有对对象，获取最小坐标，最大坐标

var objects = canvas.getObjects();

if(objects.length > 0 ){

var rect = objects[0].getBoundingRect();

var minX = rect.left;

var minY = rect.top;

var maxX = rect.left + rect.width;

var maxY = rect.top + rect.height;

for(var i = 1; i

rect = objects[i].getBoundingRect();

minX = Math.min(minX, rect.left);

minY= Math.min(minY, rect.top);

maxX = Math.max(maxX, rect.left + rect.width);

maxY= Math.max(maxY, rect.top + rect.height);

//计算平移坐标

var panX = (maxX - minX - canvas.width)/2 + minX;

var panY = (maxY - minY - canvas.height)/2 + minY;

//开始平移

canvas.absolutePan({x:panX, y:panY});

//计算缩放比例

var zoom = Math.min(canvas.width/(maxX - minX), canvas.height/(maxY - minY));

//计算缩放中心

var zoomPoint = new fabric.Point(canvas.width / 2 , canvas.height / 2);

//开始缩放

canvas.zoomToPoint(zoomPoint, zoom);

3，效果图

可以看到 20 个方块完全显示出来，而且这些内容在画布里居中显示。

二、让视图自动缩放以适应屏幕(Canvas 也自适应屏幕大小)

1，实现原理

我们通过监听浏览器窗口的 resize 事件，动态改变 Canvas 的尺寸，从而让 Canvas 大小随着浏览器的大小改变而改变。

而 Canvas 尺寸改变后，其内部视图自动缩放的实现原理同上面是一样的。

2，样例代码

margin: 0;

padding: 0;

html, body {

height: 100%;

width: 100%;

canvas {

display: block;

var canvas;

var timer;

$(function() {

canvas = new fabric.Canvas('canvas',{backgroundColor: '#D6F8FF'});

//创建随机的方块

for(var i=0; i<20; i++){

var left = (Math.random() - 0.5) * 600;

var top = (Math.random() - 0.5) * 600;

var rect = new fabric.Rect({top: top, left: left, width: 70, height: 70, fill: 'orange'});

canvas.add(rect);

//添加窗口尺寸改变响应监听

$(window).resize(resizeCanvas);

//页面加载后先设置一下canvas大小

resizeCanvas();

//窗口尺寸改变响应(修改canvas大小)

function resizeCanvas() {

canvas.setWidth($(window).get(0).innerWidth);

canvas.setHeight($(window).get(0).innerHeight);

//缩放移动视图，使其适应Canvas大小

zoomToFitCanvas();

//缩放移动视图，使其适应Canvas大小

function zoomToFitCanvas() {

//先还原缩放比例与位置

canvas.setZoom(1);

canvas.absolutePan({x:0, y:0});

//遍历所有对对象，获取最小坐标，最大坐标

var objects = canvas.getObjects();

if(objects.length > 0 ){

var rect = objects[0].getBoundingRect();

var minX = rect.left;

var minY = rect.top;

var maxX = rect.left + rect.width;

var maxY = rect.top + rect.height;

for(var i = 1; i

rect = objects[i].getBoundingRect();

minX = Math.min(minX, rect.left);

minY= Math.min(minY, rect.top);

maxX = Math.max(maxX, rect.left + rect.width);

maxY= Math.max(maxY, rect.top + rect.height);

//计算平移坐标

var panX = (maxX - minX - canvas.width)/2 + minX;

var panY = (maxY - minY - canvas.height)/2 + minY;

//开始平移

canvas.absolutePan({x:panX, y:panY});

//计算缩放比例

var zoom = Math.min(canvas.width/(maxX - minX), canvas.height/(maxY - minY));

//计算缩放中心

var zoomPoint = new fabric.Point(canvas.width / 2 , canvas.height / 2);

//开始缩放

canvas.zoomToPoint(zoomPoint, zoom);

3，效果图

不管我们如何改变浏览器大小，Canvas 始终占满整个屏幕。

同时随着 Canvas 的改变，内部视图也会随之缩放并居中，让方块都能全部显示出来。

在 Fabric.js开发时，可能会遇到要显示的完整视图尺寸超过了 canvas大小的情况。比如下面样例，我们生成 20 个方块，每个方块的位置都是随机的。由于 canvas 大小固定，可能就会造成有些方块落在显示区域外，看不到。碰到这种情况，一方面我们要提供个画布拖拽和缩放的功能，具体可以参考我之前的文章：Fabric.js - 实现鼠标拖动画布、滚轮缩放画布的功能。另一方面最好让整个视图一开... 高度可配置的视口/ 2D摄像头，旨在与pixi.js配合使用。 功能包括拖动，捏到 缩放 ，鼠标滚轮 缩放 ，减速拖动，跟随目标，动画，捕捉到点，捕捉到 缩放 ，夹紧，在边缘弹跳以及在鼠标边缘移动。 查看现场示例，尝试所有这些功能。 所有功能都是可配置和可移动的，因此请根据您的实际需要设置视口。 从pixi- viewport v3迁移到v4 视口需要导入或要求如下： import { Viewport } from 'pixi- viewport ' // or const Viewport = require ( 'pixi- viewport ' ) . Viewport 插件已移至其自己的对象： // viewport .pausePlugin('drag') viewport . plugins . pause ( 'drag' ) // viewport .resumePlugin canvas的宽高不能用百分比来显示，如果想用canvas做一个图希望能够 自适应 窗口宽度怎么办。 这里我们先画了一个宽为canvas宽度的红色矩形，这样canvas如何变化自己的宽度，矩形都可以跟着改变。 <!doctype html> <html lang="en"> <meta charset="UTF-8" /> <meta name=" viewport " content="width=device-width, 2.百分比 这种方法，可以兼容大部分浏览器，但是修改幅度比较大 .main .login .txt1{margin-top:8.59375%; position:relative;} 3.css transform 这种方法，可以兼容大部分浏览器，但是页面的位置是 居中 的 .w320 transform: scale( 点赞 + 关注 + 收藏 = 学会了 在 《 Fabric.js 使用纯色遮挡 画布 (前景色)》 中讲到使用纯色的方式遮盖 画布 。如果你的常见需要使用图片来遮盖的话， fabric.js 也提供了相应的属性来配置。 相比起使用纯色遮盖 画布 ，使用图片会更复杂。