Question

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

<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调整canvas元素的大小，同时保持所有图像和元素的比例相同？或者我是否必须为每个尺寸创建不同的画布？

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>

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

使Canvas元素及其所有子元素响应所有屏幕大小

1 个答案: