Tela de Fabricjs redefinida após o zoom
eu tenho umfabricjs tela que eu preciso ser capaz de aumentar e diminuir o zoom e também alterar a imagem / objeto várias vezes.
Para isso, configurei a tela na primeira vez que a página é carregada assim:
fabric.Object.prototype.hasBorders = false;
fabric.Object.prototype.hasControls = false;
canvas = new fabric.Canvas('my_canvas', {renderOnAddRemove: false, stateful: false});
canvas.defaultCursor = "pointer";
canvas.backgroundImageStretch = false;
canvas.selection = false;
canvas.clear();
var image = document.getElementById('my_image');
if (image != null) {
imageSrc = image.src;
if(imageSrc.length > 0){
fabric.Image.fromURL(imageSrc, function(img) {
img = scaleImage(canvas, img); //shrinks the image to fit the canvas
img.selectable = false;
canvas.centerObject(img);
canvas.setActiveObject(img);
canvas.add(img);
});
}
}
canvas.deactivateAll().renderAll();
Então, quando preciso alterar a imagem / objeto na tela ou quando a página é recarregada, tento redefinir a tela da seguinte maneira:
canvas.clear();
canvas.remove(canvas.getActiveObject());
var image = document.getElementById('my_image');
if (image != null) {
imageSrc = image.src;
if(imageSrc.length > 0){
fabric.Image.fromURL(imageSrc, function(img) {
img = scaleImage(canvas, img); //shrinks the image to fit the canvas
img.selectable = false;
canvas.centerObject(img);
canvas.setActiveObject(img);
canvas.add(img);
});
}
}
Não tenho certeza se isso importa, mas a maneira como altero a imagem é alterando a fonte em 'my_image' e redefinindo a tela com o método acima.
Isso funciona bem até eu usarcanvas.zoomToPoint
, conformeesta Depois disso, a imagem / objeto começa a mudar de posição quando redefino o zoom ou clico na tela com o mouse enquanto ele é ampliado, parecendo pular a cada alteração na direção do canto superior esquerdo, desaparecendo de vista.
Redefinir zoom:
canvas.setZoom(1);
resetCanvas(); //(above method)
Como posso restaurar a posição da imagem / objeto?
Tentei fazer a configuração inicial em vez da redefinição e costurei para trabalhar visualmente, mas na verdade estava adicionando uma nova camada de tela superior a cada nova configuração, para que não fosse bom.
Existe uma maneira de redefinir a tela para o estado original sem causar esse comportamento e ainda conseguir aumentar / diminuir o zoom corretamente?