Как я могу смоделировать CSS как Object-Fit Cover в Konvajs React?

Question

Это действительно легко в DOM, потому что я могу просто выполнить подгонку объекта: cover в css, и изображение будет обрезано и заполнено по ширине и высоте. Но в Konvajs по умолчанию кажется, что он заполняется.

Вот что я пробовал:

  const [image] = useImage(content.img);

  if (image) {
    image.setAttribute('style', `object- 
    fit:cover;width:${content.width};height:${content.height}`);
  }

Это не работает.

Answer 1

На всякий случай, если кто-то еще ищет решение.

Единственный способ, которым я смог добиться этого, - это вычислить, где обрезать исходное изображение.

const crop = () => {
  if (content.width > content.height) {
    const [cropX, cropY, cropW, cropH] = cropBasedOnWidth();
    if (cropY < 0) {
      const [cropX, cropY, cropW, cropH] = cropBasedOnHeight();
      return {x: cropX, y: cropY, height: cropH, width: cropW};
    }
    return {x: cropX, y: cropY, height: cropH, width: cropW};
  } else if (content.width < content.height) {
    const [cropX, cropY, cropW, cropH] = cropBasedOnHeight();

    if (cropX < 0) {
      const [cropX, cropY, cropW, cropH] = cropBasedOnWidth();
      return {x: cropX, y: cropY, height: cropH, width: cropW};
    }
      return {x: cropX, y: cropY, height: cropH, width: cropW};
    } else {
      return undefined;
    }
  }

const cropBasedOnWidth = () => {
 const cropW = content.naturalWidth;
 const cropH = cropW / content.width * content.height;
 const cropX = content.naturalWidth / 2 - cropW / 2;
 const cropY = content.naturalHeight / 2 - cropH / 2;
 return [cropX, cropY, cropW, cropH];
}

const cropBasedOnHeight = () => {
  const cropH = content.naturalHeight;
  const cropW = cropH / content.height * content.width;
  const cropX = content.naturalWidth / 2 - cropW / 2;
  const cropY = content.naturalHeight / 2 - cropH / 2;
  return [cropX, cropY, cropW, cropH];
}
...
return <Image crop={crop()} ... />

Я не знаюне знаю, есть ли лучший способ.