выражая положение точки внутри круга в процентах от произвольных отрезков - PullRequest
3 голосов
/ 06 января 2012

Хорошо, так ... вот что я пытаюсь сделать.В HTML / JS.Имея знание математики, которое смутило бы двенадцатилетнего ребенка.

Имея, скажем, 20 флажков на странице, пользователь выбирает ... пять из них.Затем на странице появляется круг (я предполагаю использовать одну из библиотек холста, например, Рафаэля) с пятью ответами, расположенными вокруг него.Так что это первое, что я не знаю, как сделать;разбить круг на х равных сегментов.Странные, иностранные термины, такие как «cos» и «sin», вырисовываются на горизонте.

Но тогда это становится еще более увлекательным: пользователь может щелкнуть точку на окружности.И эта точка переводится в какое-то процентное значение для каждого из сегментов.Поэтому, если пользователь проверяет Happy, Grumpy, Sneezy, Dopey и Bashful и нажимает на кружок, я могу сказать им, что они 37% Happy, 42% Dopey и 21% Sneezy.

Лучшая аналогиявозможно колесо выбора цвета, но я не могу найти ни одного JS, которые я мог бы использовать повторно.Круговая диаграмма близка - и есть хорошая демонстрация Рафаэля - но у меня есть ощущение, что фиксированные границы сегмента круговой диаграммы приведут меня по неверному маршруту для оценки процентных позиций внутри круга в целом.

Итак, учитывая мой расплывчатый и плохо продуманный запрос и заметное отсутствие какого-либо кода «вот что я пробовал» - потому что у меня нет туманного, с чего бы начать, кроме высокогоШкольные книги по тригонометрии, кто-нибудь может предложить какие-либо библиотеки кода или фрагменты, которые могут заставить меня хотя бы указывать в правильном направлении?

Спасибо :))

========================

Редактировать: Вау, спасибо за все ответы.Я попытаюсь уточнить вопрос / sa немного:

Мне нужно нарисовать круг с количеством точек x, равномерно распределенных по его окружности.Количество точек будет соответствовать количеству флажков, которые установил пользователь.

Это первый бит, на котором я застрял: я считаю, что могу нарисовать круг с размерами и в положении на странице.по моему выбору (используя Raphael или аналогичную библиотеку холстов), но как я могу рассчитать, какими должны быть координаты x / y пикселей этих точек на окружности круга?

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

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

1 Ответ

0 голосов
/ 06 января 2012

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

Прежде всего вам необходимо знать расположение пяти флажков, выбранных пользователем.Для этого библиотека jQuery предлагает несколько удобных функций, таких как $.position и $.offset.

. В вашем вопросе неясно, как именно круг, который вы хотите нарисовать, расположен по отношению к пятифлажки, которые пользователь нажимает.Что касается рисования круга, вы можете использовать что-то вроде элемента HTML5 canvas.Я еще не использовал его сам, поэтому не могу рассказать вам много об этом.

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

Что касается математики окружности, вам нужно знать, что окружность может быть параметризована на плоскости xy следующими уравнениями:

x = x0 + r cos(theta)
y = y0 + r sin(theta)

где (x0, y0) - центр круга, r - радиус круга, а тета колеблется от 0 до 2 * Пи радианы (от 0 до 360 градусов)

Дайте нам знать больше очто вы делаете, и мы можем дать вам более конкретную информацию.

...