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

【问题标题】：Draw images around page border based on inner.width/height根据 inner.width/height 在页面边框周围绘制图像
【发布时间】：2021-07-17 13:55:19
【问题描述】：

有没有一种简单的方法来填充文档边框周围的形状？根据文档的 inner.width/height 给定两个（或更多）不同的形状。

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

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

期望的结果：

【问题讨论】：

标签： javascript loops konva

【解决方案1】：

你可以这样做：

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

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

【讨论】：

感谢您的帮助。这是一个很好的起点。