如何解决如何在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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。