Skip to content

LineStyles

Overview

Styles needed to determine a stroked line shape. Generally immutable.

Mirrors much of what is done with SVG/Canvas, see https://svgwg.org/svg2-draft/painting.html for details.

@author Jonathan Olson <jonathan.olson@colorado.edu>

Class LineStyles

import { LineStyles } from 'scenerystack/kite';

Constructor

new LineStyles( options? : LineStylesOptions )

Instance Methods

equals( other : LineStyles ) : boolean

Determines of this lineStyles is equal to the other LineStyles

copy() : LineStyles

Returns a copy of this LineStyles.

leftJoin( center : Vector2, fromTangent : Vector2, toTangent : Vector2 ) : Segment[]

Creates an array of Segments that make up a line join, to the left side.

Joins two segments together on the logical "left" side, at 'center' (where they meet), and un-normalized tangent vectors in the direction of the stroking. To join on the "right" side, switch the tangent order and negate them.

rightJoin( center : Vector2, fromTangent : Vector2, toTangent : Vector2 ) : Segment[]

Creates an array of Segments that make up a line join, to the right side.

Joins two segments together on the logical "right" side, at 'center' (where they meet), and normalized tangent vectors in the direction of the stroking. To join on the "left" side, switch the tangent order and negate them.

cap( center : Vector2, tangent : Vector2 ) : Segment[]

Creates an array of Segments that make up a line cap from the endpoint 'center' in the direction of the tangent

Instance Properties

lineWidth : number

The width of the line (will be offset to each side by lineWidth/2)

lineCap : LineCap

'butt', 'round' or 'square' - Controls appearance at endpoints for non-closed subpaths. - butt: straight-line at end point, going through the endpoint (perpendicular to the tangent) - round: circular border with radius lineWidth/2 around endpoints - square: straight-line past the end point (by lineWidth/2) See: https://svgwg.org/svg2-draft/painting.html#LineCaps

lineJoin : LineJoin

'miter', 'round' or 'bevel' - Controls appearance at joints between segments (at the point) - miter: Use sharp corners (which aren't too sharp, see miterLimit). Extends edges until they meed. - round: circular border with radius lineWidth/2 around joints - bevel: directly joins the gap with a line segment. See: https://svgwg.org/svg2-draft/painting.html#LineJoin

lineDash : number[]

Even values in the array are the "dash" length, odd values are the "gap" length. NOTE: If there is an odd number of entries, it behaves like lineDash.concat( lineDash ). See: https://svgwg.org/svg2-draft/painting.html#StrokeDashing

lineDashOffset : number

Offset from the start of the subpath where the start of the line-dash array starts.

miterLimit : number

When to cut off lineJoin:miter to look like lineJoin:bevel. See https://svgwg.org/svg2-draft/painting.html

Type LineCap

import type { LineCap } from 'scenerystack/kite';

"butt" | "round" | "square"

Type LineJoin

import type { LineJoin } from 'scenerystack/kite';

"miter" | "round" | "bevel"

Type LineStylesOptions

import type { LineStylesOptions } from 'scenerystack/kite';
  • lineWidth?: number
  • lineCap?: LineCap
  • lineJoin?: LineJoin
  • lineDash?: number[]
  • lineDashOffset?: number
  • miterLimit?: number

Source Code

See the source for LineStyles.ts in the kite repository.