Plot

Plot is an object that is able to create, display and download SVG documents.

Constructor

new Plot(optionsopt)

Parameters:
NameTypeAttributesDescription
optionsobject<optional>

An object containing configuration for Plot.

Properties
NameTypeAttributesDefaultDescription
sizeobject<optional>

An object with width and height properties to be used as dimensions of the Plot.

Properties
NameTypeAttributesDefaultDescription
widthnumber<optional>
100

The width of the Plot.

heightnumber<optional>
100

The height of the Plot.

titlestring<optional>
"Untitled"

The title of the Plot.

unitsstring<optional>
"mm"

The units of measurement to be used (i.e. "mm" or "in").

backgroundColorstring<optional>
"transparent"

The background colour of the plot, as a hex value or HTML color name.

seednumber<optional>

The seed to be used for the Plot. Defaults to an 8 digit hexadecimal integer.

strokestring<optional>
"black"

The foreground colour of the plot, as a hex value or HTML color name.

strokeWidthnumber<optional>
1

The line width of the Plot. Defaults to 1 unit. (1mm)

minimumLineLengthnumber<optional>
0.1

Lines shorter than this length are not drawn.

Source

Classes

Plot

Methods

add(shape)

Adds shapes to the plot.

Parameters:
NameTypeDescription
shapeLine | Circle | Path | Array

An object or array of objects to be added to the plot.

Source
Example
import { Plot, Line, Circle } from "@jakebeamish/penplotting";

const plot = new Plot({
    backgroundColor: "#ffffff"
});

plot.generate = () => {
    const line = Line.fromArray([0, 0, 100, 100]);
    const circlesArray = [
        new Circle(10, 10, 10),
        new Circle(40, 40, 15),
        new Circle(80, 80, 20)
    ];
    plot.add([line, circlesArray]);
}

plot.draw();

addCirclesToSVG()

Adds the Circles in this Plot's circles array to it's SVG element.

Source

addLinesToSVG()

Adds the Lines in this Plot's lines array to it's SVG element.

Source

addPathsToSVG()

Adds the Paths in this Plot's paths array to it's SVG element.

Source

(private) addSingleShape(shape)

Adds a single shape to the appropriate array. Used by Plot#add.

Parameters:
NameTypeDescription
shapeLine | Path | Circle
Source

appendSVG()

Appends this plot's SVG element to the document body.

Source

clear()

Empty out any existing HTML UI and SVG document elements on the page, in order to regenerate a Plot.

Source

createUI(timeTaken)

Creates HTML UI and adds it to the document body.

Parameters:
NameTypeDescription
timeTakennumber
Source

deduplicateLines()

Removes duplicated Lines from this Plot's lines array.

Source

downloadSVG()

Download the Plot as an SVG file.

Source

draw()

Generates the SVG and UI and appends them to the document body. Must be called after defining a Plot.generate() function.

Source

filename() → {string}

Source
Returns:
  • The file name to be used for the Plot's SVG file, as a string in the format Title_ffffffff_210x297mm.svg
Type: 
string

removeOverlappingLines()

Removes overlapping Lines from this Plot's lines array.

Source

removeShortLines(minimumLength)

Removes Lines in this Plot's lines array that are shorter than a specified minimum length.

Parameters:
NameTypeDescription
minimumLengthnumber
Source