Fabricjs响应性画布项目问题

Question

当画布的宽度和高度发生变化时，我会遇到一些问题，我希望这些项目处于相同的位置。

我使用最新版本的fabricjs和pdfjs库。

下面是我用来修复它的代码，但不幸的是，它不起作用：

function rescale_canvas_if_needed() {
  var optimal_dimensions = [$(".canvasWrapper").outerWidth(), $(".canvasWrapper").outerHeight()];
  var scaleFactorX = window.innerWidth / optimal_dimensions[0];
  var scaleFactorY = window.innerHeight / optimal_dimensions[1];
  if (scaleFactorX < scaleFactorY && scaleFactorX < 1) {
    canvas.setWidth(optimal_dimensions[0] * scaleFactorX);
    canvas.setHeight(optimal_dimensions[1] * scaleFactorX);
    canvas.setZoom(scaleFactorX);
  } else if (scaleFactorX > scaleFactorY && scaleFactorY < 1) {
    canvas.setWidth(optimal_dimensions[0] * scaleFactorY);
    canvas.setHeight(optimal_dimensions[1] * scaleFactorY);
    canvas.setZoom(scaleFactorY);
  } else {
    canvas.setWidth(optimal_dimensions[0]);
    canvas.setHeight(optimal_dimensions[1]);
    canvas.setZoom(1);
  }

  canvas.calcOffset();
  canvas.renderAll();
}


function handle_resize() {
  $(".canvas-container").hide();
  rescale_canvas_if_needed();
  $(".canvas-container").show();

}

要测试它:尝试在书上添加一幅画，然后点击缩放，看看画布项的位置是如何变化的。

Answer 1

我将假设您已经正确地计算了缩放因子--我要么必须对scaleFactorX和scaleFactorY的想法进行批判性的思考，要么只玩代码(此时我太懒得这么做了)，但是您可能只需要检查其中的一个进行缩放：

function rescale_canvas_if_needed() {
  var optimal_dimensions = [$(".canvasWrapper").outerWidth(), $(".canvasWrapper").outerHeight()];

  // add a rectangle the size of the current canvas and center it
  rect = new fabric.Rect({
    left: 0,
    top: 0,
    width: canvas.width,
    height: canvas.height,
    angle: 0,
    fill: 'rgba(255,255,255,0)',
    transparentCorners: true
    });
  canvas.add(rect);
  rect.center();

  // get an active selection of all objects

  canvas.discardActiveObject();
  var sel = new fabric.ActiveSelection(canvas.getObjects(), {canvas: canvas});
  canvas.setActiveObject(sel);
  canvas.requestRenderAll();

  // scale your canvas

  var scaleFactorX = window.innerWidth / optimal_dimensions[0];
  var scaleFactorY = window.innerHeight / optimal_dimensions[1];
  if (scaleFactorX < scaleFactorY && scaleFactorX < 1) {
    canvas.setWidth(optimal_dimensions[0] * scaleFactorX);
    canvas.setHeight(optimal_dimensions[1] * scaleFactorX);
    canvas.setZoom(scaleFactorX);
  } else if (scaleFactorX > scaleFactorY && scaleFactorY < 1) {
    canvas.setWidth(optimal_dimensions[0] * scaleFactorY);
    canvas.setHeight(optimal_dimensions[1] * scaleFactorY);
    canvas.setZoom(scaleFactorY);
  } else {
    canvas.setWidth(optimal_dimensions[0]);
    canvas.setHeight(optimal_dimensions[1]);
    canvas.setZoom(1);
  }
  canvas.calcOffset();

  // scale the active selection to the new width

  sel.scaleToWidth(canvas.width);

  // center the selection

  sel.center();

  // deselect the active selection

  canvas.discardActiveObject();

  // delete the rectangle

  canvas.remove(rect);

  canvas.requestRenderAll();
}


function handle_resize() {
  // I don't think you should have to hide or show the canvas-container
  $(".canvas-container").hide();
  rescale_canvas_if_needed();
  $(".canvas-container").show();

}

这将在调整页面大小之前放弃页面上的任何活动选择--也许这就是您想要的，但是您可以在调整所有大小之前获得活动选择，然后在完成所有调整后，重新选择该活动选择。

警告:我没有测试这个，所以它可能有一个错误，无效的语法，或该性质的其他问题。

考虑到这段代码，如果你不能越过另一个急流，请告诉我。