Draw a straight line anywhere in the DOM.
The webpage: Try dom-freeline.
npm install --save dom-freeline
Then use browserify, webpack, or rollup to build your script.
Or Download one of these files from the Github repo:
dist/dom-freeline.js
dist/dom-freeline.min.js
If you use one of these prepackaged files the global name is freeLine.
import freeLine from 'dom-freeline';
//Set the starting coordinates.
let line = freeLine({x1: 10, y1: 10, x2: 100, y2: 100});
document.body.appendChild(line.element);
//Set some styles.
line.css({width: 2, 'background-color': 'red'});
//Add 10 to the first x property.
line.x1 = line.x1 + 10;
Construct an element line, and pass an options object.
element
should be a valid DOM element. Most likely a div
element, but other elements will work. Even an input
element will work for instance.
options
are mostly for setting line geometry on construction.
These options set the x/y coordinates for the first point of the line.
Set the x/y coordinates for the second point of the line.
Set the line with.
Change the first x/y of a line object.
Change the second x/y of the line object.
Pass a styles object to change the appearance of the line.
line.css()
uses dom-css
This is a very light weight library for drawing straight lines using coordinates relative to the view-port of the browser.
Before making any pull requests post an issue about what you'd like to change.
- stackoverflow question: Drawing Lines On An HTML Page
- Drawing Lines In Browsers Better for curves, but isn't used in this library
- dom-css