Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

464
Vistas
¿Cómo recorto una imagen de konva cuando se ha cambiado de tamaño?

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

ingrese la descripción de la imagen aquí

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

ingrese la descripción de la imagen aquí

 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(); }
about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

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; }
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda