GirdDot网格点

Dot组件

用 svg需要遍历生成，性能不太好，
不如直接用 canvas生成一个透明度的背景图，然后平铺

import React from 'react';
function GridDot(props) {
  const {
    width = 10,
    height = 10,
    space = 10,
    radius = 1.5,
    fill = '#000',
  } = props;
  const viewWidth = width * radius * 2 + (width - 1) * (space - radius * 2);
  const viewHeight = height * radius * 2 + (height - 1) * (space - radius * 2);
  let dots = [];
  for (let indexWidth = 0; indexWidth < width; indexWidth++) {
    for (let indexHeight = 0; indexHeight < height; indexHeight++) {
      dots.push(
        <circle
          key={`${indexWidth}-${indexHeight}`}
          cx={radius + indexWidth * space}
          cy={radius + indexHeight * space}
          r={radius}
        />
      );
    }
  }
  return (
    <svg
      width={viewWidth}
      height={viewHeight}
      viewBox={`0 0 ${viewWidth} ${viewHeight}`}
      version="1.1"
    >
      <g fill={fill}>{dots}</g>
    </svg>
  );
}
export default GridDot;