Tengo algunos problemas cuando cambia el ancho y la altura del lienzo, quiero que los elementos estén en la misma posición.
Estoy usando la última versión de fabricjs y usando la biblioteca pdfjs con ella.
aquí está el código que estoy usando para tratar de solucionarlo, pero lamentablemente no funciona:
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(); }para probarlo: intente agregar un dibujo en el libro y haga clic en acercar y alejar y vea cómo cambia la posición de los elementos del lienzo.
Voy a suponer que ha calculado el factor de escala correctamente. Tendría que pensar realmente críticamente sobre la idea de scaleFactorX y scaleFactorY o simplemente jugar con el código (del cual soy demasiado perezoso para hacerlo en este momento) , pero es posible que solo necesite verificar 1 de ellos para escalar:
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(); }Esto descartará todas las selecciones activas en la página antes de cambiar el tamaño; tal vez así lo desee, pero puede obtener la selección activa antes de cambiar el tamaño de todo, luego, una vez que haya terminado con todo el cambio de tamaño, vuelva a seleccionar esa selección activa.
Advertencia: no probé esto, por lo que puede tener un error, una sintaxis no válida u otros problemas de esa naturaleza.
Avíseme si no puede pasar otro obstáculo, dado este fragmento de código.