Draw a straight line between any two points using only a DOM element, thus allowing CSS styles to be applied
Draw a line between any two arbitrary points, using a simple DOM element.
Full documentation and examples available at http://gilmoreorless.github.io/jquery-dom-line/
$.line(fromPoint, toPoint[, options]);
fromPoint
and toPoint
are required objects with x
and y
numeric properties, relative to the top left of the page.
options
is an optional object, as listed below.
Return value is a jQuery object containing the element used for the line.
The options
object passed to $.line
is an object with the following available properties:
elem
- jQuery selector of the element to use for the line, useful for re-using a single element for subsequent lines (default: empty - creates a new div)className
- CSS class added to the line div element (default: "jquery-line") - not used if elem
option is providedlineWidth
- Thickness of the line in pixels (default: 1)lineColor
- CSS color of the line (default: black)returnValues
- If true, returns an object with the calculated dimensions for the line (see below), instead of a jQuery object (default: false)If the returnValues
option is set to true, a plain object is returned with the following defined properties:
from
- The fromPoint
argument passed to the functionto
- The toPoint
argument passed to the functioncenter
- The centre point of the line (and also the point of rotation) - contains x
and y
propertiesrotation
- The amount of rotation applied to the line - contains deg
(degrees) and rad
(radians) properties