regl-line2d
Draw polyline with regl
Last updated 3 months ago by archmoj .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install regl-line2d 
SYNC missed versions from official npm registry.

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.

Current Tags

  • 3.0.18                                ...           latest (3 months ago)

31 Versions

  • 3.0.18                                ...           3 months ago
  • 3.0.17                                ...           4 months ago
  • 3.0.15                                ...           a year ago
  • 3.0.14                                ...           a year ago
  • 3.0.13                                ...           2 years ago
  • 3.0.12                                ...           2 years ago
  • 3.0.11                                ...           2 years ago
  • 3.0.9                                ...           3 years ago
  • 3.0.8                                ...           3 years ago
  • 3.0.7                                ...           3 years ago
  • 3.0.6                                ...           3 years ago
  • 3.0.5                                ...           3 years ago
  • 3.0.4                                ...           3 years ago
  • 3.0.3                                ...           3 years ago
  • 3.0.2                                ...           3 years ago
  • 3.0.1                                ...           3 years ago
  • 3.0.0                                ...           3 years ago
  • 2.1.6                                ...           3 years ago
  • 2.1.5                                ...           3 years ago
  • 2.1.4                                ...           3 years ago
  • 2.1.3                                ...           3 years ago
  • 2.1.2                                ...           3 years ago
  • 2.1.1                                ...           3 years ago
  • 2.1.0                                ...           3 years ago
  • 2.0.4                                ...           3 years ago
  • 2.0.3                                ...           3 years ago
  • 2.0.2                                ...           3 years ago
  • 2.0.1                                ...           3 years ago
  • 2.0.0                                ...           3 years ago
  • 1.1.1                                ...           3 years ago
  • 1.1.0                                ...           3 years ago
Downloads
Today 10
This Week 109
This Month 1,264
Last Day 99
Last Week 383
Last Month 1,470
Dependencies (11)
Dev Dependencies (19)

Copyright 2014 - 2017 © taobao.org |