使 Canvas 元素及其所有子元素响应所有屏幕尺寸

Question

我正在使用 fabricJS 将图像添加到画布元素中，如下所示：

http://jsfiddle.net/97nu2/

<canvas id="canvas" width="800" height="450" style="border:1px solid #000000"></canvas>

<script>
var canvas = new fabric.Canvas('canvas');
fabric.Image.fromURL('http://s17.postimg.org/4740ku7z3/i_Stock_000000284123_XSmall.jpg', function (oImg) {
    // scale image down, and flip it, before adding it onto canvas
    oImg.scale(1);
    canvas.add(oImg);
});
</script>

我需要它完全响应所有屏幕尺寸，以便它适合平板电脑、智能手机等。我知道在 HTML 中定义宽度和高度是必需的。

是否可以使用 css 媒体查询或 javascript 调整画布元素的大小，同时保持所有图像和元素的比例相同？还是我必须为每种尺寸创建不同的画布？

Answer 1

您不需要在 html 中定义画布的大小。例如，您可以简单地根据屏幕大小调整画布大小，然后遍历所有画布对象：

<canvas id="canvas" style="border:1px solid #000000"></canvas>

<script>
  var width = 800;
  var height = 450;
  var scaleFactor = 1;

  if(screen.width < 800) {
       scaleFactor = 0.8;
  } else if (screen.width > 1200) {
       scaleFactor = 1.2;
  } 

  width = width * scaleFactor;
  height = height * scaleFactor;

  var canvas = new fabric.Canvas('canvas');
  canvas.setWidth(width);
  canvas.setHeight(height);
  canvas.calcOffset();

  //Add Rectangles, Images etc...

  if(scaleFactor != 1) {
    for(var i=0; i<canvas._objects.length; i++){
       canvas._objects[i].scale(scaleFactor);   
       canvas._objects[i].setLeft(canvas._objects[i].left * scaleFactor); 
       canvas._objects[i].setTop(canvas._objects[i].top * scaleFactor);   
    }
    canvas.renderAll();
  }
</script>

如果屏幕尺寸不符合您的需求，也许您应该尝试使用窗口尺寸。您还可以在将对象添加到画布之前对其进行缩放。无论如何，您可能还必须在调整它们的大小后重新定位画布元素。希望这可以帮助。贝尼克