Рисунок Рафаэля. Круг с двумя секторами из разных изображений

#javascript #raphael

#javascript #рафаэль

Вопрос:

Как нарисовать круг, заполненный изображением, и как нарисовать сектор такого круга? Можно ли анимировать сектор рисования (например, анимировать его размер, увеличивая угол)? Что, если я хочу нарисовать первый сектор из @image1@ и другой сектор из @image2 @?

Ответ №1:

Чтобы нарисовать круг, заполненный изображением, вы … просто нарисуйте круг и заполните его изображением: D

 var c = paper.circle(200, 200, 40);
c.attr({fill:"url(http://path_to_the_image.png)"});
  

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

Чтобы анимировать дугу, посмотрите на этот пример на веб-сайте raphalejs