如何在React中用fillPatternImage填充konva rect或在React中创建具有相同svg图像的无限网格

问题描述

我已经用konva创建了砌体网格，React在这里是我走了多远的示例： https://codesandbox.io/s/masonry-grid-image-konva-react-cp73d

有关React https://konvajs.org/docs/react/Images.html中的Konva图像的文档

我需要使用同一张卡片Like this image创建一个无限网格，但是我无法用背景图像或填充图案填充矩形。我不确定如何创建img对象以填充矩形，或者如何在无限网格with this image中重复相同的图像... svg位于codeandBox中，这是我当前的代码：

任何对此的帮助将不胜感激

import React,{ Component } from "react";
import { render } from "react-dom";
import { Stage,Layer,Image,Rect } from "react-konva";
import useImage from "use-image";

const CardImage = () => {
  const [image] = useImage("https://i.stack.imgur.com/7nF5K.png");
  return <Image image={image} />;
};

const WIDTH = 318;
const HEIGHT = 452;

const App = () => {
  const [stagePos,setStagePos] = React.useState({ x: 200,y: 200 });
  const startX = Math.floor((-stagePos.x - window.innerWidth) / WIDTH) * WIDTH;
  const endX = Math.floor((-stagePos.x + window.innerWidth * 2) / WIDTH) * WIDTH;
  const startY = Math.floor((-stagePos.y - window.innerHeight) / HEIGHT) * HEIGHT;
  const endY = Math.floor((-stagePos.y + window.innerHeight * 2) / HEIGHT) * HEIGHT;

  const gridComponents = [];

  for (var x = startX; x < endX; x += WIDTH) {
    for (var y = startY; y < endY; y += HEIGHT) {

      gridComponents.push(
        <>
          <Rect
            x={3.8 * x}
            y={1.2 * y}
            width={WIDTH}
            height={HEIGHT}
            stroke
            shadowBlur={20}
            cornerRadius={10}
          />
          <Rect
            x={3.8 * x + 405}
            y={1.2 * y + 200}
            width={WIDTH}
            height={HEIGHT}
            stroke
            shadowBlur={20}
            cornerRadius={10}
          />
          <Rect
            x={3.8 * x + 810}
            y={1.2 * y + 400}
            width={WIDTH}
            height={HEIGHT}
            stroke
            shadowBlur={20}
            cornerRadius={10}
          />
          <CardImage />
        </>
      );
    }
  }

  return (
    <Stage
      x={stagePos.x}
      y={stagePos.y}
      width={window.innerWidth}
      height={window.innerHeight}
      draggable
      onDragEnd={(e) => {
        setStagePos(e.currentTarget.position());
      }}
    >
      <Layer>{gridComponents}</Layer>
    </Stage>
  );
};

render(<App />,document.getElementById("root"));

解决方法

如果要用图像填充矩形，则可以使用fillPatternImage属性。

<Rect
  width={WIDTH}
  height={HEIGHT}
  shadowBlur={20}
  cornerRadius={10}
  fillPatternImage={image}
/>

要下载图像，您可以使用与Konva.Image和use-image钩子https://konvajs.org/docs/react/Images.html相似的方式

const [image] = useImage("https://i.stack.imgur.com/7nF5K.png");

您更新了演示：https://codesandbox.io/s/masonry-grid-image-konva-react-forked-s2wku?file=/src/index.js