Как из градиентного круга преобразовать в линию

Как из градиентного круга преобразовать в линию

Преобразование Хаффа — это классическая методика выделения элементов, которая в основном относится к преобразованию Хафа по линиям / окружностям, то есть к получению прямых линий и окружностей из изображения, и в то же время изображение должно быть преобразовано в двоичную форму.

Преобразование Хаффа направлено на поиск несовершенных примеров объектов в форме определенного типа с помощью процедуры голосования. Эта процедура голосования выполняется в пространстве параметров, в котором объекты-кандидаты Он получается в виде локального максимума в так называемом аккумуляторном пространстве, которое явно строится с помощью алгоритма, используемого для вычисления преобразования Хаффа, которое может не только идентифицировать наличие или отсутствие графики на изображении, И может найти изображение (включая положение, угол и т. Д.), Есть три классических метода стандартного преобразования Хаффа, многомасштабное преобразование Хаффа, статистическое преобразование вероятности Хаффа, основные преимущества Он может допускать пропуски в описании границ объектов и относительно не подвержен влиянию шума изображения.

где p и θ Являются ли полярный диаметр и полярный угол точки в полярных координатах (также понятно p Ближайшее расстояние от начала координат до прямой линии), но оно не является уравнением полярной координаты, поскольку оно также выражается в декартовых координатах. Значение этих двух параметров следующее:

. Преимущество этого уравнения состоит в том, что параметры угла и расстояния ограничены, а сингулярность отсутствует, поэтому вы можете искать в пространстве параметров. В то же время линейное преобразование Хафа имеет 2 параметра, связанных с этим уравнением, поэтому программе необходимо пройти только один из них во время этапа голосования и получить другой параметр через уравнение для голосования и поиска пика.

Straight Для прямых линий вы можете комбинировать каждую прямую линию изображения с парой параметров ( p , θ ) Связанный с этим параметром ( p , θ ) Самолеты иногда называютХафф Космос, Для набора двумерных прямых, поэтому для данной точки, разные ( p , θ ) Представляет разные прямые, мы ставим ( p , θ ) Соотношение между ними представлено изображением-фиксированной точкой (3,4), угол принимается за [0,2 π ] 时 ， r Диапазон значений:

обнаружит, что форма кривой подобна синусоиде, обычно p Чем больше амплитуда синусоиды, тем меньше она будет.

1. Прочитайте исходное изображение и преобразуйте его в изображение в градациях серого. Используйте оператор пороговой сегментации или обнаружения края, чтобы преобразовать его в двоичное изображение края.
2. Инициализируйте пространство Хаффа, чтобы все N u m ( θ , p ) = 0
3. За каждый пиксель ( x , y ) Найти все удовлетворяющие в пространстве параметров x c o s θ + y s i n θ = p из ( θ , p ) Да, тогда сделай N u m ( θ , p ) = N u m ( θ , p ) + 1
4. Посчитать все N u m ( θ , p ) Размер, удалить N u m ( θ , p ) > τ Параметры ( τ Это установленный порог), чтобы получить прямую линию.
5. Возьмите прямую линию из описанного выше процесса и определите начальную точку и конечную точку соответствующего отрезка линии (есть некоторые алгоритмы, такие как ширина формы бабочки, коридор пика и т. Д.)

1. Случайным образом извлеките характерную точку на изображении, то есть точку ребра. Если точка была отмечена как точка на прямой линии, продолжайте произвольно извлекать точку ребра из оставшихся точек ребра, пока все точки ребра не будут извлечены. Пока что
2. Хафф преобразует точку, и выполняет накопление и расчет;
3. Выберите точку с наибольшим значением в пространстве Хаффа. Если точка превышает пороговое значение, перейдите к шагу 4, в противном случае вернитесь к шагу 1;
4. В соответствии с максимальным значением, полученным преобразованием Хаффа, начиная с этой точки, смещение выполняется вдоль направления прямой линии, чтобы найти две конечные точки прямой линии;
5. Рассчитайте длину прямой линии. Если она превышает определенный порог, она считается хорошим выходом прямой линии и возвращается к шагу 1.

4 Hough функция преобразования в OpenCV

4.1 Стандартная функция Hough Transform HoughLines ()

4.2 Статистическая вероятность преобразования Хафа (HoughLinesP)

5.1 Анализ исходного кода HoughLines ()

5.2 Анализ исходного кода HoughLinesP

Для получения подробной информации, пожалуйста, обратитесь к следующему рисунку:

7 Функция преобразования окружностей OpenCV HoughCircles

Как создать волнистый узор в Illustrator?

1. Создайте новый документ, скажем, 600 x 600 пикселей.
2. На новом слое нарисуйте прямую горизонтальную линию.
3. Щелкните слой правой кнопкой мыши и выберите «Растрировать слой».
4. Выберите в верхней строке меню: «Фильтр», «Искажение», «Волна». Photoshop — Используйте фильтр Distort — Wave.
5. Измените настройки по своему вкусу и нажмите «ОК».

Делать
Делать
Делать

CSS → Линии с помощью linear-gradient

Короткий Урок: Как создать Конический Градиент в Adobe Illustrator за Пару Минут!

Iaroslav Lazunov Aug 23, 2010

Russian (Pусский) translation by Andrey Rybin (you can also view the original English article)

Как из градиентного круга преобразовать в линию

Как применить градиентную заливку к обводке (stroke) в Adobe Illustrator CS5 и более ранних версиях

Градиентная заливка пути (path) при помощи эффектов и панели Appearance

Градиентная заливка пути при помощи бесплатного плагина Mesh Tormentor

Лабораторная работа N 2

Рис. 1. Сегменты и узлы линии

Рис. 2. «Устройство» узла линии

Рис. 3. Точки излома: на стыке прямолинейных сегментов, прямолинейного и криволинейного сегментов, двух криволинейных сегментов

Рис. 4. Сглаженные узлы: на стыке прямолинейного и криволинейного сегментов и на стыке прямолинейного и криволинейного сегментов

Рис. 5. Пример симметричного узла

Рис. 6. Примеры замкнутых (слева), разомкнутых (в середине) и соединенных (справа) линий

Рис. 7. Кнопки раскрывающейся панели инструмента Curve (Кривая)

Рис. 8. Панель атрибутов для инструмента Artistic Media (Суперлиния)

• Кнопки Preset (Заготовка), Brush (Кисть), Sprayer (Распылитель), Calligraphic (Каллиграфия) и Pressure (С нажимом). С помощью этих кнопок выполняется переключение режимов работы инструмента.
• Поле и ползунок Freehand Smoothing (Сглаживание). Позволяют регулировать частоту создания узлов и, следовательно, степень гладкости управляющей линии соединенного объекта при ее построении от руки.
• Счетчик Artistic Media Tool Width (Ширина линии). Содержит значение, определяющее максимальную ширину подчиненного объекта при построении суперлинии.
• Раскрывающийся список Preset (Схема заготовки). Позволяет выбрать схему подчиненного объекта при работе в режиме заготовки.

Рис. 9. Режим каллиграфии

Рис. 10. Линии, построенные инструментом Artistic Media (Суперлиния) в режиме заготовки: слева — выделена управляющая кривая; в центре и справа — построенные на базе этой кривой по двум различным заготовкам подчиненные объекты

Рис. 11. Элементы панели атрибутов инструмента Artistic Media (Суперлиния), специфические для режима кисти

Рис. 12. Суперлиния построенная в режиме распылителя

Рис. 13. Пристыковываемое окно Artistic Media (Суперлиния) и его элементы

Рис. 14. Панель атрибутов для совокупности выделенных узлов кривой

Рис. 15. Диалоговое окно выравнивания

• Align Horizontal (Выровнять по горизонтали). При установке этого флажка все выделенные узлы кривой перемещаются в вертикальном направлении до совмещения с горизонтальной линией, проведенной через узел, выделенный последним.
• Align Vertical (Выровнять по вертикали). При установке этого флажка все выделенные узлы кривой перемещаются в горизонтальном направлении до совмещения с вертикальной линией, проведенной через узел, выделенный последним.
• Align Control Points (Выровнять направляющие точки). Установить этот флажок можно только в том случае, когда выделены ровно два узла кривой и одновременно установлены два предыдущих флажка. В результате выравнивания ранее выделенный узел перемещается до совмещения со вторым узлом, и его направляющие точки также перемещаются до совмещения с направляющими точками второго узла.

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

1. Начните с создания нового документа CorelDRAW и переименования его первой страницы во Freehand.
2. Выберите в панели инструмента Curve (Кривая) инструмент Freehand (Кривая). Указатель мыши примет форму, соответствующую выбранному инструменту (рис. 17, слева). Нажмите кнопку мыши и, перетаскивая указатель, постарайтесь построить желаемую замкнутую кривую, начиная с закругления. В момент приближения указателя мыши к точке, в которой начиналось построение кривой, указатель инструмента изменит свою форму (рис. 17, справа). Если отпустить кнопку мыши в этот момент, то будет построена замкнутая кривая, если раньше — то незамкнутая.

Рис. 17. Формы указателя инструмента Freehand (Кривая) в процессе построения линии и в момент ее замыкания

• узлы и сегменты кривой при работе с инструментом Freehand (Кривая) создаются автоматически;
• большинство создаваемых узлов представляют собой точки излома;
• большинство создаваемых сегментов — криволинейные.

1. Добавьте новую страницу в открытый документ CorelDRAW и переименуйте ее в Bezier. Выберите в панели инструментов инструмент Bezier (Кривая Безье).
2. Начнем построение линии с узла, предшествующего линейному сегменту. Установите указатель в нужную точку и нажмите кнопку мыши. Не отпуская кнопку, переместите указатель на некоторое расстояние вправо, так чтобы стали видны «вытащенные» из узла направляющие точки. Для того, чтобы касательная к следующему сегменту была строго горизонтальна, нажмите и удерживайте нажатой клавишу-модификатор CTRL. Отпустите кнопку мыши, а затем и клавишу CTRL — первый узел кривой построен (рис. 18). Поскольку пока он является единственным (и, следовательно, крайним) узлом линии, после завершения работы с ним он автоматически становится точкой излома. После того как линия будет замкнута в этом узле, его тип сменится.

Рис. 18. Построение первого узла линии

Рис. 19. Вид изображения перед отпусканием кнопки мыши после построения второго узла

Рис. 20. Вид изображения перед отпусканием кнопки мыши после построения третьего узла

Рис. 21. Завершение построения замкнутой кривой

1. Вставьте в открытый документ CorelDRAW новую страницу и, пользуясь приемами построения линий, постройте в ее верхней части стилизованное изображение змеи (рис. 22, сверху). Вначале постройте замкнутую кривую, соответствующую абрису головы и тела змеи. В качестве глаз и ноздрей постройте небольшие эллипсы, а зигзагом на спине послужит ломаная линия, состоящая из прямолинейных сегментов.
2. Теперь необходимо выделить все составные части изображения змеи. Проще всего это делается инструментом Pick (Выбор): выберите его и щелкните на свободном месте страницы, отменяя, таким образом, выделение. Затем перетащите указатель инструмента по диагонали воображаемого прямоугольника, охватывающего изображение змеи целиком. После отпускания кнопки мыши выделенными окажутся все элементы изображения, оказавшиеся внутри этого прямоугольника.
3. Выберите на панели инструментов инструмент Artistic Media (Суперлиния) и включите режим кисти, щелкнув соответствующую кнопку на панели атрибутов. Затем щелкните там же кнопку с изображением дискеты и задайте имя файла для сохранения мазка — например, zmejka.cmx. После щелчка кнопки ОК новый мазок готов к использованию.

Рис. 22 Определение нового мазка и его применение для построения суперлинии

Начнем с построения кривой, близкой по форме к периоду синусоиды. Для этого выберите инструмент Bezier (Кривая Безье) и щелкните мышью на свободном месте страницы. Перед тем как отпустить кнопку мыши, перетащите ее указатель вверх и вправо на некоторое расстояние. Отступив вправо, постройте еще один узел, только теперь перетащите указатель инструмента вниз и вправо. Наконец, отступив еще раз вправо, постройте третий узел кривой точно так же, как первый. В результате должна получиться кривая, похожая на представленную в верхнем левом углу рис. 23.

Рис. 23. Перетаскивание направляющих точек узлов различных типов

Рис. 24. Контекстное меню выделенного узла кривой

Рис. 25. Сжатие и поворот выделенных узлов

Постройте окружность и преобразуйте ее в кривую с помощью кнопки Convert To Curves (Преобразовать в кривые). Три раза нажав на кнопку со знаком «плюс» на вспомогательной клавиатуре, постройте три копии кривой.

1. При помощи кривой Безье нарисовать фигуру, подобную приведенной на рис. 26 а.
2. Получить копию созданной кривой и применить к ней операцию зеркального отражения (рис 26 б).
   

   a	б
   Рис. 26. Заготовка для фигуры «Сердце»

3. Выделить обе кривые с помощью инструмента Pick (Указатель)) и при помощи. команды Arrange > Combine (Монтаж > Соединить)

Рис. 27. Комбинирование кривых

Рис. 28. Соединение верхних узлов

Рис. 29. Фигура «Сердце», полученная при помощи кривых Безье

Выбрать на панели графики инструмент Ellipse (Эллипс) и, удерживая нажатой клавишу Ctrl, нарисовать круг, после чего преобразовать его в кривые (команда Convert tо curves (Преобразовать в кривые) контекстного меню). При этом круг превращается в контур (форму), содержащую четыре узла: сверху, снизу, справа и слева (рис. 30).

Рис. 30. Кривая, полученная из овала

Рис. 31. Изменение формы овала

Рис. 32. Изменение верхнего узла.

Использование CSS-градиентов

CSS-градиенты представлены типом данных <gradient> (en-US), специальным типом <image> (en-US), состоящим из последовательного перехода между двумя и более цветами. Вы можете выбрать один из трёх типов градиентов: линейный (создаётся с помощью функции linear-gradient (en-US)), круговой (создаётся с помощью radial-gradient (en-US)) и конический (создаётся с помощью функции conic-gradient (en-US)). Вы можете также создавать повторяющиеся градиенты с помощью функций repeating-linear-gradient (en-US), repeating-radial-gradient (en-US) и repeating-conic-gradient (en-US).

Градиенты могут быть использованы везде, где может быть использован тип <image> , например в качестве фона. Так как градиенты генерируются динамически, они могут избавить от необходимости использовать файлы растровых изображений, которые ранее использовались для достижения похожих эффектов. В дополнение к этому, так как градиенты генерируются браузером, они выглядят лучше, чем растровые изображения в случае увеличения масштаба, и их размер может быть изменён на лету.

Мы начнём с того, что покажем вам линейные градиенты, затем покажем возможности, поддерживаемые всеми типами градиентов, используя линейные градиенты в качестве примера, затем перейдём к круговым, коническим и повторяющимся градиентам.

Использование линейных градиентов

Линейный градиент создаёт цветную полосу, имеющую вид прямой линии.

Обычный линейный градиент

Чтобы создать самый простой тип градиента, всё, что вам нужно – это указать два цвета. Они называются точки остановки цвета. Их должно быть, как минимум, две, но у вас может быть столько, сколько захотите.

Изменение направления

По умолчанию линейные градиенты идут сверху вниз. Вы можете изменить угол поворота путём задания направления.

Диагональные градиенты

Вы можете даже создать градиент, проходящий диагонально, из угла в угол.

Использование углов

Если вы хотите больше контроля над его направлением, вы можете задать градиенту определённый угол.

При использовании угла 0deg создаётся вертикальный градиент, идущий снизу вверх, 90deg создаёт горизонтальный градиент, идущий слева направо, и так далее по часовой стрелке. Отрицательные углы идут против часовой стрелки.

Указание цветов и создание эффектов

Все типы CSS-градиентов – это диапазон позиционно-зависимых цветов. Цвета, создаваемые CSS-градиентами, могут варьироваться непрерывно с изменением позиции, создавая плавные цветовые переходы. Возможно также создавать полосы сплошных цветов, и резкие переходы между двумя цветами. Следующее примеры работают во всех градиентных функциях:

Использование более двух цветов

Вам не нужно ограничиваться двумя цветами – вы можете использовать столько, сколько хотите! По умолчанию цвета равномерно распределены по градиенту.

Расположение точек остановок цветов

Вам не нужно оставлять ваши точки остановок цветов на их исходных позициях. Чтобы подправить их расположение, вы можете не задавать каждому ничего, или задать одну или две процентные, а для круговых и линейных градиентов – абсолютные значения. Если вы зададите расположение с процентах, 0% будет представлять начальную точку, в то время как 100% будет являться конечной точкой; однако, если необходимо, вы можете использовать значения и вне этого диапазона для достижения желаемого эффекта. Если вы не будете задавать расположение, позиция этой точки остановки будет автоматически рассчитана за вас так, что первая точка остановки будет расположена на 0% , а последняя – на 100% , а все остальные точки остановки будут расположены на полпути между соседними точками остановки.

Создание резких переходов

Чтобы создать резкий переход между двумя цветами, т. е. получить черту вместо постепенного перехода, обе соседние точки остановки должны быть установлены в одном месте. В этом примере цвета делят точку остановки на отметке 50% , посередине градиента:

Подсказки градиента

По умолчанию градиент идёт плавно от одного цвета до другого. Вы можете добавить цветовую подсказку, чтобы переместить значение средней точки перехода в определённую точку градиента. В этом примере мы переместили среднюю точку перехода из отметки 50% на отметку 10%.

Создание цветных линий и полосок

Чтобы добавить внутрь градиента сплошную цветную область без плавного перехода, добавьте две позиции для точки остановки. Точки остановки могут быть в двух позициях, что эквивалентно двум подряд точкам остановки с тем же цветом на разных позициях. Цвет достигнет полной насыщенности на первой точке, проследует с той же насыщенностью до второй точки остановки и перейдёт в цвет следующей точки остановки через первую позицию следующей точки остановки.

В первом примере выше лаймовый цвет идёт от отметки 0%, далее, как указано, до отметки 20%, сделает переход от лаймового до красного через 10% ширины градиента, достигнет сплошного красного на отметке 30%, и останется таким до 45% градиента, где он потускнеет до голубого, оставаясь таким ещё 15% градиента, и так далее.

Во втором примере каждая вторая точка остановки для каждого цвета находится на той же позиции, что и первая точка остановки соседнего цвета, создавая полосатый эффект.

В обоих примерах градиент написан дважды: первый – это метод из CSS-изображений уровня 3 использующий повторения цвета на каждой остановке, а второй пример – это метод из CSS-изображений уровня 4, где в линейном объявлении точек остановки используются множественные точки остановки с двумя значениями длин точек остановки.

Управление переходом градиента

По умолчанию градиент плавно переходит между цветами двух соседних точек остановки, а средняя точка между этими двумя точками остановки является средним значением цветового перехода. Вы можете контролировать интерполяцию или переход между двумя точками остановки добавлением его расположения в цветовой подсказке. В этом примере цвет достигает средней точки перехода от лаймового до голубого на расстоянии 20% градиента вместо стандартных 50%. Во втором примере нет такой подсказки, чтобы подчеркнуть отличие, получаемое при её использовании:

Перекрытие градиентов

Градиенты поддерживают прозрачность, так что вы можете накладывать фоны для получения всяких разных эффектов. Фоны накладываются снизу вверх таким образом, что первый объявленный будет лежать поверх остальных.

Наслаивание градиентов

Вы можете даже наслаивать градиенты друг на друга. Если верхние градиенты не полностью непрозрачны, градиенты, лежащие под ними, тоже будут видны.

Использование круговых градиентов

Круговые градиенты схожи с линейными градиентами, за исключением того, что они создают градиентный круг по направлению от центральной точки. Вы можете указать, где должна находиться центральная точка. Вы также можете сделать её круглой или овальной.

Обычный круговой градиент

Как и в случае с линейными градиентами, всё, что вам нужно, чтобы создать круговой градиент – это два цвета. По умолчанию центр градиента находится на отметке 50% 50%, градиент становится овальным с учётом соотношения сторон содержащего его блока:

Размещение круговых точек остановки

Опять же, как и у линейных градиентов, вы можете расположить каждую круговую точку остановки, указав значение в виде процентной или абсолютной длины.

Расположение центра градиента

Вы можете расположить центр градиента с помощью ключевых значений, процентной или абсолютной длины. Значения в виде числа или процента повторяются в случае, если указано только одно из них, иначе порядок повторения будет определяться порядком расположения, начиная слева и сверху.

Задание размеров кругового градиента

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

Пример: ближайшая сторона для эллипса

В этом примере используется значение размера closest-side , которое означает, что размер определяется расстоянием от начальной точки (центра) до ближайшей стороны блока.

Пример: самый дальний угол для эллипса

Этот пример схож с предыдущим, за исключением того, что его размер указан как farthest-corner , что устанавливает размер градиента значением расстояния от начальной точки до самого дальнего угла блока.

Пример: ближайшая сторона для круга

Этот пример использует closest-side , что задаёт размер круга как расстояние между начальной точкой (центром) и ближайшей стороной. Радиус круга – это расстояние между центром градиента и ближайшей стороной. Круг, с учётом позиционирования в точке 25% от левой стороны и 25% от низа, ближе всего к низу, так как расстояние по высоте в этом случае меньше, чем по ширине.

Наложение круговых градиентов

Вы можете накладывать круговые градиенты так же, как линейные. Первый объявленный будет сверху, последний – снизу.

Использование конических градиентов

CSS-функция conic-gradient() создаёт изображение, состоящее из градиента с переходом цвета, обёрнутым вокруг центральной точки (в отличие от градиента, исходящего кругом от центральной точки). Образцом конического градиента можно назвать круговые диаграммы и цветовые круги, но он также может быть использован для создания шахматной доски (клетки) и других интересных эффектов.

Синтаксис конического градиента схож с синтаксисом кругового градиента, но с тем отличием, что точки остановки цвета располагаются вокруг градиентной дуги, вдоль длины окружности круга, а не по градиентной линии, идущей от центра градиента. Также, точки остановки цвета задаются только в процентах или градусах, абсолютные величины недопустимы.

В круговом градиенте цвета переходят от центра окружности наружу, во всех направлениях. В случае конического градиента цвета идут, как бы оборачиваясь вокруг центра круга, начиная сверху и двигаясь по часовой стрелке. Так же, как и в круговом градиенте, вы можете указать расположение центра градиента. Так же, как и в линейном градиенте, вы можете изменять угол градиента.

Обычный конический градиент

Так же, как и в случае с линейными и круговыми градиентами, всё, что вам нужно для создания конического градиента – это два цвета. По умолчанию центр градиента находится в точке 50% 50%, начало градиента направлено вверх:

Расположение конического центра

Как и в круговом градиенте, вы можете задать расположение центра конического градиента с помощью ключевых значений, процентных или абсолютных величин с использованием ключевого слова «at».

Изменение угла

Вы можете задать угол, в котором направлено начало градиента значением типа <angle> , с предшествующим ему ключевым словом «from».

Использование повторяющихся градиентов

Размер повторяющейся градиентной линии или дуги – это длина от значения первой до значения последней точки остановки цвета. Если первая точка остановки содержит только цвет без указания длины до точки остановки, то используется значение по умолчанию, равное 0. Если последняя точка остановки содержит только цвет без указания длины до точки установки, то используется значение по умолчанию, равное 100%. Если ни то, ни другое не определено, то линия градиента будет равна 100%, что означает, что линейный и конический градиент не будет повторяться, а круговой градиент будет повторяться, только если радиус градиента меньше, чем расстояние между центром градиента и самым дальним углом. Если первая точка остановки определена и имеет значение больше 0, градиент будет повторяться при условии, что размер линии или дуги равен разнице между первой и последней точкой остановки, если эта разница меньше, чем 100% или 360 градусов.

Повторяющиеся линейные градиенты

В этом примере используется repeating-linear-gradient (en-US) для создания повторяющегося градиента, идущего по прямой линии. Цветовая последовательность начинается заново с каждым повторением градиента. В данном случае градиент имеет длину 10px.

Множественные повторяющиеся линейные градиенты

Так же, как и в случае с обычными линейными и круговыми градиентами, вы можете использовать множественные градиенты, один поверх другого. Это имеет смысл, только если градиенты частично прозрачны, что позволяет видеть одни градиенты сквозь прозрачные части других градиентов, этого же можно достичь при условии использования разных размеров фона (background-size), при этом возможно ещё и при разных значениях свойства background-position для каждого градиента. Мы использовали прозрачность.

В данном случае градиентные линии имеют длину 300px, 230px и 300px.

Клетчатый градиент

Для создания клетчатого градиента мы используем несколько полупрозрачных перекрывающих друг друга градиентов. В первом объявлении фона мы внесли в список каждую остановку цвета отдельно. Во втором объявлении свойства background используется синтаксис многопозиционных остановок цвета:

Повторяющиеся круговые градиенты

В этом примере для создания кругового градиента, повторяющегося из центральной точки, используется repeating-radial-gradient (en-US). Цветовая последовательность начинаются заново с каждой итерацией повторения градиента.

превратить круг в линию, развернув его с помощью SVG и d3

Для проекта мы пытаемся превратить круг в линию (и обратно), пока он вращается по линейной траектории, подобно тому, как вращается и перемещается шина при движении по дороге, или согнутый указательный палец вытягивается и снова сгибается в пальмовое.

В этом скрипка, у меня есть статический SVG (верхний круг), который вращается по линейному черному пути (который находится над кругом, чтобы имитировать вытягивание пальца), который определен в HTML.

Я также использую d3 для создания «круга», состоящего из соединенных точек (и могу развернуться, если вы нажмете на/в круге благодаря @ChrisJamesC здесь ), и переводится и поворачивается в функции moveAlongLine при нажатии на фиолетовую линию:

Первая проблема в том, что .duration(1000) не распознается и выдает Uncaught TypeError: Object [object Array] has no method ‘duration’ в консоли, поэтому есть разница между статическим определением dur в SVG и динамически настраивая его в JS/D3, но это второстепенно.

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

Проблема, которую я не могу понять, заключается в том, как позволить ему развернуться вверх (а также повторно откатиться назад), при этом статическая точка, являющаяся верхним центром круга, также совпадает с самой левой точкой на линии.