Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

188
Visualizações
Fabricjs responsive canvas items issues

i'm having some issues when the canvas width and height changes, i want the items to be in there same position..

i' using the latest version of fabricjs and using pdfjs library with it..

here's the code i'm using to try to fix it, but not working unfortunately:

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();

}

to test it: try adding an drawing on the book and click on the zoom in and out and see how the canvas items position is changing.

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

I am going to make the assumption that you've calculated the scale factor correctly - I'd either have to think really critically about the scaleFactorX and scaleFactorY idea or just play with code (of which I am too lazy to do at this moment), but you may only need to check for 1 of them for scaling:

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();

}

This will discard any active selections on the page before resizing it - maybe thats how you will want it, but you could get the active selection before resizing everything, then once it is done with all the resizing, reselect that active selection.

Warning: I didn't test this, so it may have a bug, invalid syntax, or other problems within that nature.

Let me know if you can't past another hurtle, given this bit of code.

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda