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

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

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

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

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

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


konvajs konvajs-reactjs
person Lester Dela Cruz    schedule 29.10.2019    source источник
comment
Как вы тогда используете image? Рендеринг <Image /> компонента?   -  person lavrton    schedule 30.10.2019
comment
Да, я визуализирую компонент ‹Image /›.   -  person Lester Dela Cruz    schedule 30.10.2019

Ответы (1)


arrow_upward
1
arrow_downward

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

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

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()} ... />

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

person Lester Dela Cruz    schedule 30.10.2019