0

Problema com zoom de tela, ao usar o fabricjs.

Quando tenho um canvas com muitos elementos, o zoom demora muito, fazendo um delay muito lento, está quebrando o desenho, e o canvas não finaliza a renderização corretamente, o lápis passa a riscar no lugar errado, é uma série de problemas...

Javascript:

window.onload = function() {

   var area = document.getElementById('my_area_canvas');
   var size = 0.1;

   function zoomIn() {

      var scale = Math.min( 
        (window.innerWidth - 170) / window.innerWidth, 
        (window.innerHeight - 170) / window.innerHeight 
      );
     scale=+size;
     area.style.transform = 'scale('+scale+')';
   }

   function zoomOut() {

      var scale = Math.min( 
        (window.innerWidth - 170) / window.innerWidth, 
        (window.innerHeight - 170) / window.innerHeight 
      );
      scale=-size;
      area.style.transform = 'scale('+scale+')';
   }

}

HTML:

<button onclick="zoomIn()">+</button>
<button onclick="zoomOut()">-</button>

<div id="my_area_canvas" style="width: 1108px; height: 598px; position: relative; user-select: none;">
    <canvas id="shapes" width="1108" height="598" class="shapes lower-canvas" style="position: absolute; width: 1108px; height: 598px; left: 0px; top: 0px; touch-action: none; user-select: none;">
    </canvas>
</div>

Existe alguma maneira de adaptar esse zoom conforme o modelo que ele apresenta aqui? http://fabricjs.com/fabric-intro-part-5

3
  • O elemento "my_area_canvas" está definido com uma classe em vez de um id. 15/12/2019 às 16:38
  • ok, corrigi, mas esse não era o problema. Mas já corrigi o problema, e vou publicar uma resposta. 16/12/2019 às 11:05
  • bom dia colega, consegue ajudar com isso pt.stackoverflow.com/questions/534532/…
    – Laercio
    20/11/2021 às 11:34

1 Resposta 1

1

Só precisei acrescentar isso dentro das funções e resolveu o problema:

 var originalWidth = canvas.getWidth();
 var originalHeight = canvas.getHeight();
 var ratio = 1;

 canvas.setDimensions({ width: originalWidth * ratio, height: originalHeight * ratio });
 canvas.setZoom(ratio);

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .