Главное меню

Кривые Безье

Кривые Безье – это линии особой формы, описываемые тремя или четырьмя точками: начальной, конечной и одной или двумя контрольными. Начальная и конечная точки, как и в случае прямой линии, задают начало и конец кривой Безье, а контрольные точки формируют касательные, определяющие форму этой кривой.

Кривые Безье

На рис. 22.1 кривая Безье выделена утолщенной линией, ее начальная и конечная точки обозначены кружками, квадратики соответствуют контрольным точкам. Через каждую контрольную точку, а также через начальную и конечную точки кривой Безье проведены касательные (тонкие прямые линии) – они определяют форму кривой. Если мы мысленно переместим какую-либо из контрольных точек, то направление проведенной через нее касательной изменится, и, следовательно, изменится и форма кривой Безье.

На рис. 22.1 представлена кривая Безье с двумя контрольными точками. Такие кривые применяются чаще всего.

Но зачастую предпочтительнее использовать другую, "вырожденную", форму кривых Безье – с одной контрольной точкой (рис. 22.2).

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

Для рисования кривых Безье с двумя контрольными точками предусмотрен метод bezierCurveTo:

<контекст рисования>.bezierCurveTo

(<горизонтальная координата первой контрольной точки>,

<вертикальная координата первой контрольной точки>,

<горизонтальная координата второй контрольной точки>,

<вертикальная координата второй контрольной точки>,

<горизонтальная координата конечной точки>,

<вертикальная координата конечной точки>)

Назначение параметров этого метода понятно из их описания. Все они задаются в пикселах в виде чисел. Метод не возвращает результата.

Рисование кривой Безье начинается в той точке, где в данный момент установлено перо. После рисования кривой перо устанавливается в ее конечную точку.

Вот Web-сценарий, рисующий кривую Безье с двумя контрольными точками:

ctxCanvas.beginPath();

ctxCanvas.moveTo(100, 100);

ctxCanvas.bezierCurveTo(120, 80, 160, 20, 100, 200);

ctxCanvas.stroke();

Рисование кривых Безье с одной контрольной точкой реализует метод quadraticCurveTo:

<контекст рисования>.quadraticCurveTo

(<горизонтальная координата контрольной точки>,

<вертикальная координата контрольной точки>,

<горизонтальная координата конечной точки>,

<вертикальная координата конечной точки>)

Описывать параметры этого метода также нет смысла – их назначение понятно. Все они задаются в пикселах в виде чисел. Метод не возвращает результата.

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

Вот Web-сценарий, рисующий кривую Безье с одной контрольной точкой:

ctxCanvas.beginPath();

ctxCanvas.moveTo(100, 100);

ctxCanvas.quadraticCurveTo(200, 100, 200, 200);

ctxCanvas.stroke();

Получившаяся кривая будет иметь вид дуги.

Более сложный пример иллюстрирует листинг 22.3.

Кривые Безье

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

Еще один пример приведен в листинге 22.4.

Кривые Безье

Web-сценарий из листинга 22.4 рисует прямоугольник со скругленными углами. Попробуйте сами с ним разобраться.

Прямоугольники

Мы уже умеем рисовать прямоугольники, используя описанные ранее методы strokeRect и fillRect. Но прямоугольники, рисуемые этими методами, представляют собой независимые фигуры, не являющиеся частью какого-либо сложного контура. Если мы хотим нарисовать прямоугольник в составе сложного контура, нам придется прибегнуть к методу rect:

<контекст рисования>.rect(<горизонтальная координата>,

<вертикальная координата>, <ширина>, <высота>)

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

После рисования прямоугольника методом rect перо устанавливается в точку с координатами [0,0], т. е. в верхний левый угол канвы.

Web-сценарий из листинга 22.5 рисует сложную фигуру, состоящую их трех накладывающихся друг на друга квадратов, и создает для нее заливку.

Рисование прямоугольников

Задание стиля линий

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

Свойство lineCap задает форму начальных и конечных точек линий. Его значение может быть одной из следующих строк:

"butt" – начальная и конечная точки как таковые отсутствуют (значение по умолчанию);

"round" – начальная и конечная точки имеют вид кружков;

"square" – начальная и конечная точки имеют вид квадратиков.

Web-сценарий из листинга 22.6 рисует толстую прямую линию, начальная и конечная точки которой имеют вид кружков.

Задание стиля линий

Свойство lineJoin задает форму точек соединения линий друг с другом. Его значение может быть одной из следующих строк:

"miter" – точки соединения имеют вид острого или тупого угла (значение по умолчанию);

"round" – точки соединения, образующие острые углы, скругляются;

"bevel" – острые углы, образуемые соединяющимися линиями, как бы срезаются.

Web-сценарий из листинга 22.7 рисует контур треугольника толстыми линиями, причем точки соединения этих линий, образующие острые углы, будут срезаться.

Задание стиля линий

Свойство miterLimit задает дистанцию, на которую могут выступать острые углы, образованные соединением линий, от точки соединения, когда для свойства lineJoin задано значение "miter". Углы, выступающие на бóльшую дистанцию, будут срезаны.

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

Листинг 22.8 содержит исправленный вариант Web-сценария, приведенного ранее.

Задание стиля линий

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