Градиент параллелограмма - PullRequest
0 голосов
/ 29 марта 2012

Я работаю в JavaScript, рисуя на холсте, и у меня есть четыре координаты, чтобы нарисовать параллелограмм, называемый A, B, C и D, начиная с верхнего левого, верхнего правого, нижнего левого и нижнего правогосоответственно.

Примером некоторых координат может быть:

A: (3, 3)

B: (4, 3)

C: (1, 0)

D: (2, 0)

Я могу нарисовать параллелограмм очень хорошо, но я хотел бы заполнить его градиентом.Я хочу, чтобы градиент заполнял слева направо, но в соответствии с углом фигуры.Библиотека, которую я использую (CAKE), требует начала и конца координат для градиента.Мои остановки и старты будут где-то на полпути между A и C и заканчиваются где-то на полпути между B и D. Конечно, это не просто ТОЧНО на полпути, потому что углы в A, B, C и D не являются прямыми углами,Итак, учитывая эту информацию (координаты), как найти точку на линии A -> C, чтобы начать, и точку на линии B -> D, чтобы остановить?

Помните, я делаюэто в JavaScript, поэтому у меня есть несколько хороших математических инструментов для расчета.

1 Ответ

0 голосов
/ 29 марта 2012

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

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

enter image description here

Как видите, чтобы сделать градиент дляВ приведенном выше параллелограмме мы игнорируем стороны AC и BD и делаем градиент относительно AB и CD .Вы можете решить, какую пару сторон использовать, но я бы, вероятно, выбрал длину, чтобы отображение было одинаковым для всех ваших параллелограммов (либо вам нужен градиент относительно пары более длинных сторон, либо более коротких, на ваш выбор, но личноЯ бы пошел с более длинными сторонами).

Допустим, вы выбрали AB .Наклон линии, перпендикулярной AB , является обратной величиной, обратной наклону AB , который равен (ax-bx)/(by-ay) (осторожно при делении на ноль здесь!).

Далее вы должны найти 2 градиентные точки, которые будут двумя подходящими точками на любой линии с этим наклоном.Один из вариантов - выбрать линию, проходящую через A , использовать A в качестве начальной точки и использовать точку, где она пересекается с CD в качестве конечной точки (Вы можете использовать эту страницу в качестве руководства для определения точки пересечения).В противном случае сохраняйте уклон, но подгоняйте точки по своему вкусу, чтобы получить желаемый градиент.

Как только у вас появятся точки для градиента, подключите их, и это будет кусок пирога!

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