En mi proyecto, tengo un lienzo konva donde puedo agregar elementos. De forma predeterminada, estas imágenes de elementos tienen una altura y un ancho de 200. Al intentar aplicar un recorte al elemento, el recorte ignora las dimensiones de la imagen redimensionada. Recorta el tamaño de la imagen a la altura y el ancho correctos, pero la imagen en sí vuelve a sus dimensiones originales. ¿Hay una manera fácil de arreglar esto? Vi que se le pedía a KonvaJS recortar y cambiar el tamaño, pero eso se trata de un cambio de tamaño manual de las imágenes.
imagen cuando se carga con las dimensiones originales 394 x 387 que se redimensionan a 200 x 200 imagen en un área de 200 x 200
al intentar recortar la imagen de 8 píxeles, la imagen vuelve a 394 x 387 y se recorta a 386 x 387 en un área de imagen de 192 x 200
addItem = (imgUrl) => { const img = new (window as any).Image(); img.onload = () => { const width, height = 200; img.width = 200; img.height = 200; const newImg = new Konva.Image({ width, height, image: img, draggable: true }); this.layer.add(newImg); this.layer.draw(); }; img.src = imageUrl; } cropItem = (item) => { item.crop({ x: item.cropX() + 8, y: item.cropY() + 0, width: item.width() - 8, height: item.height() - 0 }); item.width(item.width() - 8); this.layer.draw(); }Necesitarás usar scaleX y scaleY
addItem = (imgUrl) => { const img = new (window as any).Image(); img.onload = () => { const { width, height } = image; const desiredWidth = 200; const desiredHeight = 200; const scaleX = desiredWidth / width; const scaleY = desiredHeight / height; const newImg = new Konva.Image({ width, height, image: img, scaleX, scaleY, draggable: true }); this.layer.add(newImg); this.layer.draw(); }; img.src = imageUrl; }