создать точки шестиугольника SVG только с длиной - PullRequest
Новая
       6

создать точки шестиугольника SVG только с длиной

0 голосов
/ 04 сентября 2018

Я пытаюсь создать шестиугольник, используя многоугольник SVG.

Я хочу создать координаты x и почему, но мой код не работает.

Я думал, что смогу использовать функции триггера, преобразовав каждую точку на 60 градусов.

Это явно не работает. 

const radius = 25;

const points = [0, 1, 2, 3, 4, 5, 6].map((n) => {
    const current = n * 60;

    return [radius * Math.cos(current), -radius * Math.sin(current)];
  }).map((p) => p.join(','))
  .join(' ');

document.querySelector('polygon')
  .setAttribute("points", "100,0 50,0 100,100");
<svg width="200px" height="200px" viewBox="0 0 200 200">
    <polygon points="" style="fill: #ccffcc; stroke: red;stroke-width: 3;"
    />
   
</svg>

1 Ответ

0 голосов
/ 04 сентября 2018

Согласно этой статье , она может быть преобразована в javascript, например: 

const radius = 50;
const height = 200;
const width = 200;

const points = [0, 1, 2, 3, 4, 5, 6].map((n, i) => {
    var angle_deg = 60 * i - 30;
    var angle_rad = Math.PI / 180 * angle_deg;
    return [width/2 + radius * Math.cos(angle_rad), height/2 + radius * Math.sin(angle_rad)];
  }).map((p) => p.join(','))
  .join(' ');

document.querySelector('polygon')
  .setAttribute("points", points);
<svg width="200px" height="200px" viewBox="0 0 200 200">
    <polygon points="" style="fill: #ccffcc; stroke: red;stroke-width: 3;"
    />
   
</svg>
...