html5图片居中自适应,Fabric.js - 画布视图viewport的自适应（内容自动缩放并居中）...

在 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.r