Разбить круг на полигоны html canvas

@maruo · Регистрация: 26.04.2013

Студворк — интернет-сервис помощи студентам

Уважаемые подскажите каким способом можно разбить круг(2d), на полигоны
Как я понимаю версткой этого не достичь скорее всего, и думаю что тут только канвас?
На скриншоте я красным показал как примерно разбить.

@maruo · 10.10.2016, 19:13 **[ТС]**

Как я понял задача сложная, бесплатно даже подсказывать не будут.
Хорошо, ваша цена если меня устроит то готов оплатить работу

@8Observer8 · 10.10.2016, 21:32

Я не понял, что вы хотите. Для чего это нужно в конечном итоге?

@maruo · 10.10.2016, 22:14 **[ТС]**

8Observer8, Я не буду оглашать для чего это будет в конечном итоге.
Есть задача нужно решить.
Что должно получиться в конце?
Это мы передаем число полигонов. И круг делится на это число полигонов. Так же на полигоны возможно повесить обработчик. Например при наведении выделить этот полигон цветом. или при клике вызвать функцию
PS: мб я не так выражаюсь , полигоны я имею в виду сегменты, секторы. Как вы это воспринимаете. Я это понимаю как полигоны.

Добавлено через 10 минут
Я перерыл сеть, не нашел ничего подобного что бы приблизится к решению задачи.
Пытался отыскать фраемворки какие то , что бы не писать с нуля эти алгоритмы.
Увы я не справился, нужна помощь, будет плохо если за меня кто то напишет, ибо я сам себе эту задачу придумал и теперь не могу решить

@8Observer8 · 10.10.2016, 23:16

Я вроде начал понимать, но хотел бы уточнить. Я на рисунке ниже изобразил сколько мы передаём полигонов, и как разбивается круг. Как будет выглядеть круг, если мы будем передавать 5, 6 и т.д.?

@maruo · 11.10.2016, 00:29 **[ТС]**

8Observer8, 5-6 не будет , минимальное число полигонов там 20 - 1000шт.
Ну вот насчет разбивки я думал, и вариант как вы показали будет некрасивым, и неюзабильным когда полигонов будет штук 500 хотябы... Видал я пример в сети вот такой .
На скриншоте да прямоугольник, но мы мысленно можем представить что это будет круг

Это плагин canvas Voronoi я разбирал его сегодня пытался что то учудить с ним пока не выходит. Почти то что надо но не совсем.
https://gist.github.com/mbostock/6675193

Вот демо http://bl.ocks.org/mbostock/6675193
Там не то что надо, но похоже, там непонятный алгоритм, и действие при наведении, а мне надо лишь выделить полигон активным и повесить событие

@8Observer8 · 11.10.2016, 00:36

Вижу, что используется библиотека с сайта: https://d3js.org/
И вот там среди примеров этот интерактивный: http://bl.ocks.org/mbostock/4060366

@maruo · 11.10.2016, 00:41 **[ТС]**

8Observer8, Да сам того не подозревая шастая в поисках показать вам демо, наткнулся на пару интересных вещей.
http://bl.ocks.org/mbostock/3061181
http://bl.ocks.org/mbostock/3664045
Думаю мне стоит поискать получше на этом портале

@8Observer8 · 11.10.2016, 01:30

Мне пришла такая мысль попробовать использовать тесселяцию с помощью ThreeJS, вот пример: https://threejs.org/examples/w... ation.html

Добавлено через 3 минуты
Тоже интересный пример с тесселяцией на ThreeJS: http://www.realtimerendering.c... _demo.html

@maruo · 11.10.2016, 12:49 **[ТС]**

8Observer8, Да есть все же примеры, просто плохо поискал

@8Observer8 · 11.10.2016, 13:10

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

@maruo · 11.10.2016, 19:18 **[ТС]**

8Observer8, Задача сложная, и не выполнимая математическим способом по сути. Если делать так что бы не оставалось промежутков.
Думаю делить треугольниками. А то что будет у краев немного просвет я думаю я с этим с мирюсь

Новые блоги и статьи Все статьи Все блоги /
YAFU@home — распределённые вычисления для математики. На CPU Programma_Boinc 20.01.2026 YAFU@home — распределённые вычисления для математики. На CPU YAFU@home — это BOINC-проект, который занимается факторизацией больших чисел и исследованием aliquot-последовательностей. Звучит. . .	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит: токи, напряжения и их 1 и 2 производные при t = 0;. . .
Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .

@maruo 133 / 133 / 48 Регистрация: 26.04.2013 Сообщений: 1,356

	Разбить круг на полигоны html canvas 10.10.2016, 12:57. Показов 2486. Ответов 11 Метки нет (Все метки) Уважаемые подскажите каким способом можно разбить круг(2d), на полигоны Как я понимаю версткой этого не достичь скорее всего, и думаю что тут только канвас? На скриншоте я красным показал как примерно разбить. 0

@maruo 133 / 133 / 48 Регистрация: 26.04.2013 Сообщений: 1,356
	10.10.2016, 19:13 [ТС]
	Как я понял задача сложная, бесплатно даже подсказывать не будут. Хорошо, ваша цена если меня устроит то готов оплатить работу 0

@8Observer8 9037 / 2937 / 494 Регистрация: 05.10.2013 Сообщений: 7,964 Записей в блоге: 216
	10.10.2016, 21:32
	Я не понял, что вы хотите. Для чего это нужно в конечном итоге? 1

@maruo 133 / 133 / 48 Регистрация: 26.04.2013 Сообщений: 1,356
	10.10.2016, 22:14 [ТС]
	8Observer8, Я не буду оглашать для чего это будет в конечном итоге. Есть задача нужно решить. Что должно получиться в конце? Это мы передаем число полигонов. И круг делится на это число полигонов. Так же на полигоны возможно повесить обработчик. Например при наведении выделить этот полигон цветом. или при клике вызвать функцию PS: мб я не так выражаюсь , полигоны я имею в виду сегменты, секторы. Как вы это воспринимаете. Я это понимаю как полигоны. Добавлено через 10 минут Я перерыл сеть, не нашел ничего подобного что бы приблизится к решению задачи. Пытался отыскать фраемворки какие то , что бы не писать с нуля эти алгоритмы. Увы я не справился, нужна помощь, будет плохо если за меня кто то напишет, ибо я сам себе эту задачу придумал и теперь не могу решить 0

@8Observer8 9037 / 2937 / 494 Регистрация: 05.10.2013 Сообщений: 7,964 Записей в блоге: 216
	10.10.2016, 23:16
	Я вроде начал понимать, но хотел бы уточнить. Я на рисунке ниже изобразил сколько мы передаём полигонов, и как разбивается круг. Как будет выглядеть круг, если мы будем передавать 5, 6 и т.д.? Миниатюры 1

@maruo 133 / 133 / 48 Регистрация: 26.04.2013 Сообщений: 1,356
	11.10.2016, 00:29 [ТС]
	8Observer8, 5-6 не будет , минимальное число полигонов там 20 - 1000шт. Ну вот насчет разбивки я думал, и вариант как вы показали будет некрасивым, и неюзабильным когда полигонов будет штук 500 хотябы... Видал я пример в сети вот такой . На скриншоте да прямоугольник, но мы мысленно можем представить что это будет круг Это плагин canvas Voronoi я разбирал его сегодня пытался что то учудить с ним пока не выходит. Почти то что надо но не совсем. https://gist.github.com/mbostock/6675193 Вот демо http://bl.ocks.org/mbostock/6675193 Там не то что надо, но похоже, там непонятный алгоритм, и действие при наведении, а мне надо лишь выделить полигон активным и повесить событие 1

@maruo 133 / 133 / 48 Регистрация: 26.04.2013 Сообщений: 1,356
	11.10.2016, 00:41 [ТС]
	8Observer8, Да сам того не подозревая шастая в поисках показать вам демо, наткнулся на пару интересных вещей. http://bl.ocks.org/mbostock/3061181 http://bl.ocks.org/mbostock/3664045 Думаю мне стоит поискать получше на этом портале 1

@8Observer8 9037 / 2937 / 494 Регистрация: 05.10.2013 Сообщений: 7,964 Записей в блоге: 216
	11.10.2016, 01:30
	Мне пришла такая мысль попробовать использовать тесселяцию с помощью ThreeJS, вот пример: https://threejs.org/examples/w... ation.html Добавлено через 3 минуты Тоже интересный пример с тесселяцией на ThreeJS: http://www.realtimerendering.c... _demo.html 0

@maruo 133 / 133 / 48 Регистрация: 26.04.2013 Сообщений: 1,356
	11.10.2016, 12:49 [ТС]
	8Observer8, Да есть все же примеры, просто плохо поискал 0

@8Observer8 9037 / 2937 / 494 Регистрация: 05.10.2013 Сообщений: 7,964 Записей в блоге: 216
	11.10.2016, 13:10
	Я, если честно, даже с примерами затрудняюсь ответить, как разбивать круг на заданное количество равных кусков. По-моему, математически задача очень сложная, но интересная. 0

@maruo 133 / 133 / 48 Регистрация: 26.04.2013 Сообщений: 1,356
	11.10.2016, 19:18 [ТС]
	8Observer8, Задача сложная, и не выполнимая математическим способом по сути. Если делать так что бы не оставалось промежутков. Думаю делить треугольниками. А то что будет у краев немного просвет я думаю я с этим с мирюсь 0