canvas | Стили линий

Объекты, реализующие интерфейс CanvasPathDrawingStyles, имеют атрибуты и методы (определенные в этом разделе), которые управляют обработкой строк объектом.

Атрибут lineWidth даёт ширину линий в единицах координатного пространства. При получении он должен вернуть текущее значение. При настройке следует игнорировать нулевые, отрицательные, бесконечные и NaN значения, оставляя значение неизменным; другие значения должны изменить текущее значение на новое значение.

Когда создается объект, реализующий интерфейс CanvasPathDrawingStyles, атрибут lineWidth должен изначально иметь значение 1.0.

Атрибут lineCap определяет тип окончаний, которые UA будут размещать в конце строк. Три допустимых значения: «butt» (стык), «round» (круглый) и «square» (квадратный).

При получении он должен вернуть текущее значение. При настройке текущее значение должно быть изменено на новое значение.

Когда создаётся объект, реализующий интерфейс CanvasPathDrawingStyles, атрибут lineCap должен изначально иметь значение «butt» (стык).

Атрибут lineJoin определяет тип углов, которые UA будут размещать на стыке двух линий. Три допустимых значения: «bevel» (скос), «round» (скругление) и «miter» (митра).

При получении он должен вернуть текущее значение. При настройке текущее значение должно быть изменено на новое значение.

Когда создаётся объект, реализующий интерфейс CanvasPathDrawingStyles, атрибут lineJoin должен изначально иметь значение «miter» (митра).

Когда атрибут lineJoin имеет значение «miter» (митра), штрихи используют предельное значение угла наклона, чтобы решить, как визуализировать соединения. Коэффициент ограничения митры может быть явно установлен с помощью атрибута miterLimit. При получении он должен вернуть текущее значение. При настройке следует игнорировать нулевые, отрицательные, бесконечные и NaN значения, оставляя значение неизменным; другие значения должны изменить текущее значение на новое значение.

Когда создается объект, реализующий интерфейс CanvasPathDrawingStyles, атрибут miterLimit должен изначально иметь значение 10.0.

Каждый объект CanvasPathDrawingStyles имеет список тире, который либо пуст, либо состоит из чётного числа неотрицательных чисел. Изначально список тире должен быть пустым.

Метод setLineDash(segments) при вызове должен выполнить следующие шаги:

1. Если какое-либо значение в сегментах segments не является конечным (например, значение Infinity или NaN), или если какое-либо значение отрицательно (меньше нуля), то возвратите (без генерации исключения; пользовательские агенты могут отображать сообщение на консоли разработчика, хотя, так как это было бы полезно для отладки).
2. Если количество элементов в сегментах segments нечётное, пусть сегменты segments будут объединением двух копий сегментов segments.
3. Пусть в тире-списке объекта будут сегменты segments.

Когда вызывается метод getLineDash(), он должен возвращать последовательность, значения которой являются значениями тире-списка объекта в том же порядке.

Иногда бывает полезно изменить «фазу» штрихового рисунка, например для достижения эффекта «марширующих муравьев». Фазу можно установить с помощью атрибута lineDashOffset. При получении он должен вернуть текущее значение. При настройке следует игнорировать бесконечные значения и значения NaN, оставляя значение неизменным; другие значения должны изменить текущее значение на новое значение.

Когда создается объект, реализующий интерфейс CanvasPathDrawingStyles, атрибут lineDashOffset должен изначально иметь значение 0.0.

Когда пользовательский агент должен отслеживать путь (trace a path), учитывая стиль style объекта, реализующий интерфейс CanvasPathDrawingStyles, он должен запустить следующий алгоритм. Этот алгоритм возвращает новый путь.

1. Пусть путь path будет копией отслеживаемого пути.

2. Удалите из контура все линейные сегменты нулевой длины.

3. Удалите из пути path все подпути, не содержащие строк (т. е. подпути с одной точкой).

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

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

6. Если список тире стиля style пуст, перейдите к шагу с пометкой convert.

7. Пусть ширина шаблона pattern width будет объединением всех записей списка штрихов стиля style в единицах координатного пространства.

8. Для каждого подпути subpath в пути path выполните следующие подшаги. Эти подшаги изменяют подпути в пути в естественных условиях path in vivo.

8.1. Пусть ширина подпути subpath width равняется длине всех строк подпути subpath в единицах координатного пространства.

8.2. Пусть смещение offset будет значением lineDashOffset стиля style в единицах координатного пространства.

8.3. Если смещение offset больше ширины шаблона pattern width, уменьшите его на ширину шаблона pattern width. Пока смещение offset меньше нуля, увеличивайте его на ширину шаблона pattern width.

8.4. Определите L как линию линейных координат, определенную вдоль всех линий в подпути subpath, так что начало первой строки в подпути определяется как координата 0, а конец последней строки в подпути определяется как координата ширины подпути subpath width.

8.5. Пусть позиция position равна нулю минус смещение offset.

8.6. Пусть index равен 0.

8.7. Пусть текущее состояние current state будет выключено off (другие состояния будут включенными on и нулевыми zero-on).

8.8. Dash on: пусть длина сегмента segment length будет значением индексной записи тире списка в стиле style.

8.9. Увеличить позицию position на длину сегмента segment length.

8.10. Если позиция position больше ширины подпути subpath width, то завершите эти подшаги для этого подпути и начните их снова для следующего подпути; если подпутей больше нет, то вместо этого перейдите к шагу с пометкой convert.

8.11. Если длина сегмента segment length отлична от нуля, пусть текущее состояние current state будет включено on.

8.12. Увеличить индекс index на единицу.

8.13. Dash off: пусть длина сегмента segment length будет значением индексной index записи в списке тире стиля style.

8.14. Пусть start будет положением смещения позиции position на L.

8.15. Увеличить позицию position на длину сегмента segment length.

8.16. Если позиция position меньше нуля, перейдите к шагу, обозначенному после обрезки post-cut.

8.17. Если start меньше нуля, пусть start будет нулем.

8.18. Если позиция position больше ширины подпути subpath width, тогда пусть end будет смещением ширины подпути subpath width на L. В противном случае пусть end будет смещением позиции position на L.

8.19. Перейти к первому подходящему шагу:

==> Если длина сегмента segment length равна нулю и текущее состояние current state выключено off

Ничего не делайте, просто перейдите к следующему шагу.

==> Если текущее состояние current state выключено off

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

Точка имеет направленность directionality для рисования концов линий (см. Ниже). Направленность - это направление, которое исходная линия имела в этой точке (то есть, когда L была определена выше).

==> В противном случае

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

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

8.20. После обрезки Post-cut: если позиция position больше ширины подпути subpath width, перейдите к шагу, обозначенному как convert (преобразовать).

8.21. Если длина сегмента segment length больше нуля, пусть positioned-at-on-dash будет ложным false.

8.22. Увеличить индекс index на единицу. Если оно равно количеству записей в тире-списке стиля style, тогда пусть index будет 0.

8.23. Вернитесь к шагу, обозначенному dash on.

9. Convert (Преобразовать): это шаг, который преобразует путь в новый путь, представляющий его ход.

Создайте новый путь, который описывает край областей, которые будут охвачены, если прямая линия с длиной, равной lineWidth стиля style, будет проходить вдоль каждого подпути в пути path, сохраняя при этом такой угол, чтобы линия была ортогональна перемещаемому пути, заменяя каждую точку концевой заглушкой, необходимой для удовлетворения атрибута стиля lineCap, как описано ранее и подробно описано ниже, и заменяя каждое соединение объединением, необходимым для удовлетворения типа lineJoin стиля style, как определено ниже.

Caps (Заглушки): каждая точка имеет плоский край, перпендикулярный направлению линии, выходящей из неё. Затем он увеличивается в соответствии со значением lineCap стиля style. Значение "butt" (стыка) означает, что дополнительная граница строки не добавляется. Значение "round" означает, что полукруг с диаметром, равным ширине lineWidth стиля style, необходимо дополнительно разместить на линии, выходящей из каждой точки. Значение "square" означает, что в каждой точке должен быть добавлен прямоугольник с длиной ширины lineWidth стиля style и шириной ширины lineWidth половинного стиля style, расположенный ровно напротив края, перпендикулярного направлению линии, выходящей из точки.

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

Joins (Соединения): в дополнение к точке, где происходит соединение, к каждому соединению относятся две дополнительные точки, по одной для каждой линии: два угла, находящиеся на половине ширины линии от точки соединения, по одному перпендикулярно каждой линии, каждый сбоку дальше всего от другой линии.

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

Значение "bevel" означает, что это всё, что отображается при соединениях.

Значение "round" означает, что дуга, соединяющая два вышеупомянутых угла соединения, примыкающая (но не перекрывающаяся) к вышеупомянутому треугольнику, с диаметром, равным ширине линии и исходной точкой в ​​точке соединения, должна быть добавлена ​​в присоединяется.

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

Длина под углом - это расстояние от точки соединения до пересечения краев линии на внешней стороне соединения. Коэффициент предела скоса - это максимально допустимое отношение длины скоса к половине ширины линии. Если длина скоса приведет к превышению предельного отношения скоса (установленного атрибутом miterLimit стиля style), то этот второй треугольник нельзя добавлять.

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

10. Верните только что созданный путь.

Информационные ссылки

Стандарт HTML — Раздел «4.12.5.1.3 Line styles» — https://html.spec.whatwg.org/multipage/canvas.html#line-styles