drawbetween.js
A JavaScript library for drawing images and shapes on the specified line segment.
Demo
https://higuri.github.io/drawbetween.js/sample/
Installation
via NPM
npm install drawbetween
# or...
yarn add drawbetween
CommonJS
const DrawBetween = require('drawbetween');
ES Module
import DrawBetween from 'drawbetween';
via CDN
<script scr="https://unpkg.com/drawbetween"></script>
Usage Example
HTML
<div id="canvas" style="width:300px; height:150px"></div>
JavaScript
const canvas = document.querySelector('#canvas');
const draw = new DrawBetween(canvas);
// draw images between (0,0) and (250,0).
const imageUrl = 'YOUR_IMAGE_URL';
draw.images({x: 0, y: 0}, {x: 250, y: 0}, imageUrl);
// draw rects with default options.
draw.rects({x: 0, y: 40}, {x: 250, y: 40});
// draw cross marks with custom options.
draw.crossMarks({x: 10, y: 80}, {x: 260, y: 80}, {
minInterval: 40,
strokeColor: '#f00',
strokeWidth: 3
});
// draw custom paths.
const drawer = (ctx, p) => {
ctx.beginPath();
ctx.arc(p.x, p.y, 10, 0, 2 * Math.PI);
ctx.fillStyle = '#0af';
ctx.fill();
};
draw.withDrawer({x: 10, y: 110}, {x: 260, y: 110}, drawer, {
minInterval: 35
});
CodePen
https://codepen.io/higuri/pen/jJNNmB
API
DrawBetween(targetDiv)
new Create a new DrawBetween object.
-
targetDiv
: Element - a reference to <div> to be drawn.
line(p0, p1, options)
Draw a straight line between p0 and p1.
-
p0
: {x: number, y: number} - a start point of line. -
p1
: {x: number, y: number} - an end point of line. -
options
:-
width
: number - line width. <default: 1> -
strokeColor
: string - line color. <default: '#000'> -
lineDash
: number[] - distances to alternately draw a line and a gap. See CanvasRenderingContext2D.setLineDash() for details. <default: [0, 0]>
-
images(p0, p1, imageUrl, options)
Draw images on the specified line segment.
-
p0
: {x: number, y: number} - a start point of the line segment. -
p1
: {x: number, y: number} - an end point of the line segment. -
imageUrl
: string - a full URL of image to draw. -
options
:-
width
: 'original' | number - image width. <default: 'original'> -
height
: 'original' | number - image height. <default: 'original'> -
rotate
: 'auto' | number - rotation andgle in radians. <default: 'auto'> -
minInterval
: number - minimum spacing between adjacent images. <default: 0> -
borderColor
: string - border color of image. <default: '#000'> -
borderWidth
: number - border width of image. <default: 0>
-
rects(p0, p1, options)
Draw rectangles on the specified line segment.
-
p0
: {x: number, y: number} - a start point of the line segment. -
p1
: {x: number, y: number} - an end point of the line segment. -
options
:-
width
: number - rectangle width. <default: 20> -
height
: number - rectangle height. <default: 20> -
rotate
: 'auto' | number - rotation andgle in radians. <default: 'auto'> -
minInterval
: number - minimum spacing between adjacent rectangles. <default: 0> -
strokeColor
: string - stroke color of rectangle. <default: '#000'> -
strokeWidth
: number - stroke width of rectangle. <default: 0> -
fillColor
: string - fill color of rectangle. <default: '#000'>
-
circles(p0, p1, options)
Draw circles on the specified line segment.
-
p0
: {x: number, y: number} - a start point of the line segment. -
p1
: {x: number, y: number} - an end point of the line segment. -
options
:-
radius
: number - circle radius. <default: 10> -
minInterval
: number - minimum spacing between adjacent circles. <default: 0> -
strokeColor
: string - stroke color of circle. <default: '#000'> -
strokeWidth
: number - stroke width of circle. <default: 0> -
fillColor
: string - fill color of circle. <default: '#000'>
-
crossMarks(p0, p1, options)
Draw cross marks on the specified line segment.
-
p0
: {x: number, y: number} - a start point of the line segment. -
p1
: {x: number, y: number} - an end point of the line segment. -
options
:-
lineLength
: number - line length of cross mark. <default: 20> -
rotate
: 'auto' | number - rotation andgle in radians. <default: 'auto'> -
minInterval
: number - minimum spacing between adjacent cross marks. <default: 0> -
strokeColor
: string - stroke color of cross mark. <default: '#000'> -
strokeWidth
: number - stroke width of cross mark. <default: 0>
-
triangles(p0, p1, options)
Draw triangles on the specified line segment.
-
p0
: {x: number, y: number} - a start point of the line segment. -
p1
: {x: number, y: number} - an end point of the line segment. -
options
:-
edgeLength
: number - edge length of triangle. <default: 20> -
rotate
: 'auto' | number - rotation andgle in radians. <default: 'auto'> -
minInterval
: number - minimum spacing between adjacent triangles. <default: 0> -
strokeColor
: string - stroke color of triangle. <default: '#000'> -
strokeWidth
: number - stroke width of triangle. <default: 0> -
fillColor
: string - fill color of triangle. <default: '#000'>
-
withDrawer(p0, p1, drawer, options)
Draw specified paths on the specified line segment.
-
p0
: {x: number, y: number} - a start point of the line segment. -
p1
: {x: number, y: number} - an end point of the line segment. -
drawer
: ((ctx: CanvasRenderingContext2D, p: {x: number, y: number}) => void) - drawing function. -
option
:-
minInterval
: number - minimum spacing between adjacent paths. <default: 0>
-
clear()
Clear all drawings of the instance.
License
This project is licensed under the MIT License - see the LICENSE.md file for details.