如何在 React 中使用 fillPatternImage 填充 konva 矩形或在 React 中使用相同的 svg 图像创建无限网格

Question

我已经用 konva 和 React 创建了砖石网格，这里是我取得的进展的示例： https://codesandbox.io/s/masonry-grid-image-konva-react-cp73d

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

我需要用同一张卡片创建一个无限网格 Like this image but I'm not being able to fill the rect with background image or fill pattern. I'm not being sure about how to create the img object to fill the rect or how to repeat the same image in an infinite grid with this image... svg 在 codesandbox 中，这是我当前的代码：

如有任何帮助，我们将不胜感激

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"));

Answer 1

如果你想用图片填充矩形，你可以使用 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

如何在 React 中使用 fillPatternImage 填充 konva 矩形或在 React 中使用相同的 svg 图像创建无限网格

How can I fill a konva rect with fillPatternImage in React or create an infinite grid with the same svg image in React

reactjs

image

konvajs

react-konva

konva