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