Skip to content

gl-vis/regl-line2d

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ac57210 · Feb 14, 2024
Jan 22, 2018
Aug 31, 2017
Sep 10, 2018
Apr 5, 2020
Jan 22, 2018
Aug 23, 2021
Feb 14, 2024
Nov 10, 2017
May 1, 2018
Feb 12, 2024
Sep 14, 2017
Dec 17, 2021
Dec 25, 2020

Repository files navigation

regl-line2d experimental

Draw polyline with regl.

regl-line2d

Remake on gl-line2d:

  • GPU join calculation.
  • Bevel, round and rectangular joins.
  • Dash patterns.
  • Self-overlapping and sharp angles cases.
  • Multiline rendering.
  • Float64 precision.
  • <polyline>-compatible API

Demo.

Usage

npm install regl-line2d

let regl = require('regl')({extensions: 'angle_instanced_arrays'})
let line2d = require('regl-line2d')(regl)

// draw red triangle
line2d.render({ thickness: 4, points: [0,0, 1,1, 1,0], close: true, color: 'red' })

line2d.render(options|list?)

Draw line or multiple lines and update options, once per frame at most.

Option Default Description
positions, points, data [] Point coordinates, eg. [0,0, 1,1, 0,2, 1,-1] or [[0,0], [1,1], [0,2], [1,-1]].
color, colors, stroke black CSS color string or an array with 0..1 values, eg. 'red' or [0, 0, 0, 1].
fill null Fill area enclosed by line with defined color.
opacity 1 Line transparency regardless of color.
thickness, lineWidth, width, strokeWidth 1 Line width in px.
dashes, dash, dasharray null Array with dash lengths in px, altering color/space pairs, ie. [2,10, 5,10, ...]. null corresponds to solid line.
join, type bevel Join style: 'rect', 'round', 'bevel'. Applied to caps too.
miterLimit 1 Max ratio of the join length to the thickness.
close, closed, closePath false Connect last point with the first point with a segment.
overlay false Enable overlay of line segments.
range, dataBox null Visible data range.
viewport, viewBox null Area within canvas, an array [left, top, right, bottom] or an object {x, y, w, h} or {left, top, bottom, right}.

To render multiple lines pass an array with options for every line as list:

line2d.render([
  {thickness: 2, points: [0,0, 1,1], color: 'blue'},
  {thickness: 2, points: [0,1, 1,0], color: 'blue'}
])

null argument will destroy line2d instance and dispose resources.

line2d.update(options|list)

Update line(s) not incurring redraw.

line2d.draw(id?)

Draw lines from last updated options. id integer can specify a single line from the list to redraw.

line2d.destroy()

Dispose line2d and associated resources.

Related

Similar

License

(c) 2017 Dima Yv. MIT License

Development supported by plot.ly.