根据inner.width/height在页面边框周围绘制图像

如何解决根据inner.width/height在页面边框周围绘制图像

是否有一种简单的方法可以在文档边框周围填充形状？根据文档的内部宽度/高度给出两个（或更多）不同的形状。

理解顶行或侧列可以容纳多少图像非常简单，但对我来说困难的是将此标志传递给函数，以便它知道何时从上到下填充图像。

如果您遇到过这种情况，请告诉我，代码示例如下： https://codesandbox.io/s/snowy-paper-9pvdc?file=/src/index.js

想要的结果：

解决方法

你可以这样做：

const App = () => {
  const canvaWidth = window.innerWidth;
  const canvaHeight = window.innerHeight;
  const rectWidth = 80;
  const rectHeight = 80;

  const objectsToFitHorizontally = Math.floor(canvaWidth / rectWidth);
  const xItems = [...Array(objectsToFitHorizontally)];
  const objectsToFitVertically = Math.floor(canvaHeight / rectHeight);
  const yItems = [...Array(objectsToFitVertically)];

  return (
    <Fragment>
      <Stage width={canvaWidth} height={canvaHeight}>
        <Layer>
          {xItems.map((_,index) => (
            <>
              <Rect
                x={rectWidth * index}
                y={0}
                width={rectWidth}
                height={rectHeight}
                fill={index % 2 === 0 ? "green" : "yellow"}
              />
              <Rect
                x={rectWidth * index}
                y={canvaHeight - rectHeight}
                width={rectWidth}
                height={rectHeight}
                fill={index % 2 === 0 ? "green" : "yellow"}
              />
            </>
          ))}
          {yItems.map((_,index) => (
            <>
              <Rect
                x={0}
                y={rectHeight * index}
                width={rectWidth}
                height={rectHeight}
                fill={index % 2 === 0 ? "green" : "yellow"}
              />
              <Rect
                x={canvaWidth - rectHeight}
                y={rectHeight * index}
                width={rectWidth}
                height={rectHeight}
                fill={index % 2 === 0 ? "green" : "yellow"}
              />
            </>
          ))}
        </Layer>
      </Stage>
    </Fragment>
  );
};

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

https://codesandbox.io/s/vigorous-fermi-fmk2c?file=/src/index.js

只需要处理无法将整数个形状放入画布宽度/高度的情况。