Создайте элементы внутри пути с помощью Svg.js - PullRequest
Новая
       10

Создайте элементы внутри пути с помощью Svg.js

0 голосов
/ 28 июня 2018

Моя цель - нарисовать анимированное звездное небо:

Starry sky

Я не могу понять, как создать несколько элементов SVG внутри траектории дуги.

Лучшее, что я могу сделать, - это создать свою дугу, рандомизировать положение сотен точек и оставить только те, которые находятся в области пути.

Вот пример codepen , чтобы проиллюстрировать это. 

var s = SVG('scene').size('100%', 500);

var arc = s.path('M700,401 A100,100 0 0,1 800,301 L800,201 A200,200 0 0,0 
600,401 L700,401 Z');

arc.attr({
  fill: '#fff',
  stroke: '#fff',
  strokeWidth: 1
});

var c, x, y;

  for (var count = 0; count < 100; count++) {

    x = Math.random() * window.innerWidth / 2;
    y = Math.random() * window.innerHeight;

    if(arc.inside(x, y)) {

      c = s.circle(10).fill('#0f6').move(x, y);

    }
    else {

      c = s.circle(10).fill('#DDCA7E').move(x, y);

    }
}

Как правильно создать эти точки строго внутри сложной формы?

Спасибо за советы

...