Блог

Главная - Вопросы по программированию - Как равномерно распределить точки равномерно по квадратному контейнеру?

Как равномерно распределить точки равномерно по квадратному контейнеру?

#javascript #react-native

Вопрос:

я пытаюсь распределить круги на контейнере svg, как это:

 const NewLockScreen = () => {
  const svgWidth = width - 24;
  return (
    <Container>
      <Svg
        width={svgWidth}
        height={svgWidth}
        style={{backgroundColor: 'green'}}>
        {/* {new Array(9).fill(0).map((_e, i) => {
          const isOdd = (num: number) => num % 2;
          return (
            <Circle fill="red" key={i} r={23} cx={i * width} cy={10 * i} />
          );
        })} */}
        <Circle fill="black" r={10} cx={10} cy={10} />
        <Circle fill="black" r={10} cx={(svgWidth - 5) / 2} cy={10} />
        <Circle fill="black" r={10} cx={svgWidth - 10} cy={10} />
        <Circle fill="black" r={10} cx={10} cy={(svgWidth - 5) / 2} />
        <Circle
          fill="black"
          r={10}
          cx={(svgWidth - 5) / 2}
          cy={(svgWidth - 5) / 2}
        />
        <Circle
          fill="black"
          r={10}
          cx={svgWidth - 10}
          cy={(svgWidth - 5) / 2}
        />
        <Circle fill="black" r={10} cx={10} cy={svgWidth - 10} />
        <Circle
          fill="black"
          r={10}
          cx={(svgWidth - 5) / 2}
          cy={svgWidth - 10}
        />
        <Circle fill="black" r={10} cx={svgWidth - 10} cy={svgWidth - 10} />
      </Svg>
    </Container>
  );
};

текущий результат выглядит так:введите описание изображения здесь

Мне любопытно, как добиться такого результата, делая что-то подобное из прокомментированного кода?

  {/* {new Array(9).fill(0).map((_e, i) => {
              const isOdd = (num: number) => num % 2;
              return (
                <Circle fill="red" key={i} r={23} cx={i * width} cy={10 * i} />
              );
            })} */}

чтобы мне не пришлось этого делать?

  <Circle fill="black" r={10} cx={10} cy={10} />
        <Circle fill="black" r={10} cx={(svgWidth - 5) / 2} cy={10} />
        <Circle fill="black" r={10} cx={svgWidth - 10} cy={10} />
        <Circle fill="black" r={10} cx={10} cy={(svgWidth - 5) / 2} />
        <Circle
          fill="black"
          r={10}
          cx={(svgWidth - 5) / 2}
          cy={(svgWidth - 5) / 2}
        />
        <Circle
          fill="black"
          r={10}
          cx={svgWidth - 10}
          cy={(svgWidth - 5) / 2}
        />
        <Circle fill="black" r={10} cx={10} cy={svgWidth - 10} />
        <Circle
          fill="black"
          r={10}
          cx={(svgWidth - 5) / 2}
          cy={svgWidth - 10}
        />
        <Circle fill="black" r={10} cx={svgWidth - 10} cy={svgWidth - 10} />

Комментарии:

1. Код не намного красивее, чем решение, которое у вас есть, если только вам не требуются динамические свойства (точки расширения ДхШ). Ваш прокомментированный код, вероятно, не сделал бы этого красиво. Есть несколько условий, которые необходимо выполнить. Вам нужно разделить на ширину поперек, чтобы ваши приращения соответствовали максимальной ширине контейнера, а затем определить, 3 или более наших роста, чтобы убедиться, что мы делаем то же самое. Петля центральная, если ты в этом разбираешься.

2. @blanknamefornow это просто макет функции, которую я хочу создать, я плохо разбираюсь в математике

Метки: