0
392
VistasEl desplazamiento emite imágenes cuando está dentro del grupo (scaleToWidth)
Tengo un problema al escalar una imagen dentro de un grupo, el desplazamiento de la imagen cambia. El grupo consta de un fondo (Rect) y una imagen. Al escalar el grupo, el desplazamiento si la imagen se vuelve diferente. Lo esperado es que el desplazamiento siga siendo el mismo que el fondo.
Estoy usando Fabric 4.0.0-beta.6
const canvas = new fabric.Canvas('canvas'); canvas.setWidth(document.body.clientWidth); canvas.setHeight(document.body.clientHeight); const bg = new fabric.Rect({ width: 100, height: 100, fill: 'red', }); fabric.Image.fromURL("https://dummyimage.com/300x150/000/fff", function(img) { img.scaleToWidth(bg.width) const post = new fabric.Group([bg, img], { left: 100, top: 100, }); post.scaleToWidth(400); canvas.add(post); canvas.renderAll(); });
·
Juan Pablo Isaza
2 Respuestas
Responde la pregunta0
Establecer la propiedad strokeWidth del elemento de fondo en 0 solucionó el desplazamiento para mí.
const canvas = new fabric.Canvas('canvas'); canvas.setWidth(document.body.clientWidth); canvas.setHeight(document.body.clientHeight); const bg = new fabric.Rect({ width: 100, height: 100, fill: 'red', strokeWidth: 0, //<--- }); fabric.Image.fromURL("https://dummyimage.com/300x150/000/fff", function(img) { img.scaleToWidth(bg.width) const post = new fabric.Group([bg, img], { left: 100, top: 100, }); post.scaleToWidth(400); canvas.add(post); canvas.renderAll(); }); <canvas id="canvas"></canvas> <script src="https://cdn.jsdelivr.net/npm/fabric@4.0.0-beta.6-browser/dist/fabric.min.js"></script>
·
Juan Pablo Isaza
Denunciar
0
Obviamente, eso es un error con fabricJS. Sin embargo, si no desea solucionarlo por su cuenta en su código fuente, puede solucionarlo.
Puede corregir manualmente la posición agregando un desplazamiento de 0,5 a las propiedades top e left de la imagen.
Por ejemplo:
const canvas = new fabric.Canvas('canvas'); const bg = new fabric.Rect({ width: 100, height: 100, fill: 'red' }); fabric.Image.fromURL("https://dummyimage.com/300x150/000/fff", function(img) { img.scaleToWidth(bg.width); img.left += 0.5; img.top += 0.5; const post = new fabric.Group([bg, img], { left: 100, top: 100 }); post.scaleToWidth(400); canvas.add(post); canvas.renderAll(); }); <script src="https://cdn.jsdelivr.net/npm/fabric@4.0.0-beta.6-browser/dist/fabric.min.js"></script> <canvas id="canvas" width="600" height="400"></canvas>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta