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

2017-12-02 发布：hangge 阅读：6147

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

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

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

1，实现原理

首先我们遍历所有的对象，获取所有对象左上角坐标的最小值，以及所有对象右下角坐标的最大值。
接着根据上面的值以及 Canvas 的宽高，计算出缩放比例以及平移的距离，并对 Canvas 的视图（Viewport）进行平移和缩放操作。

2，样例代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="fabric.js"></script>
    <script src="jquery-3.1.1.js"></script>
    <script>
      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<objects.length; 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);
      }
    </script>
  </head>
  <body>
      <canvas id="canvas" width="400" height="250"></canvas>
  </body>
</html>

3，效果图

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

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

1，实现原理

我们通过监听浏览器窗口的 resize 事件，动态改变 Canvas 的尺寸，从而让 Canvas 大小随着浏览器的大小改变而改变。
而 Canvas 尺寸改变后，其内部视图自动缩放的实现原理同上面是一样的。

2，样例代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      html, body {
        height: 100%;
        width: 100%;
      }
      canvas {
        display: block;
      }
    </style>
    <script src="fabric.js"></script>
    <script src="jquery-3.1.1.js"></script>
    <script>
      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<objects.length; 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);
      }
    </script>
  </head>
  <body>
      <canvas id="canvas" width="400" height="250"></canvas>
  </body>
</html>

3，效果图

不管我们如何改变浏览器大小，Canvas 始终占满整个屏幕。
同时随着 Canvas 的改变，内部视图也会随之缩放并居中，让方块都能全部显示出来。