Path

The Path object with which you can define a path that can be drawn to a Panel . You can create a new path object with Content.createPath() and draw it with Graphics.drawPath() .

const var p = Content.createPath();

p.startNewSubPath(0.0, 0.0);
p.lineTo(0.2, 1.0);
p.lineTo(1.0, 0.2);
p.lineTo(0.7, 1.0);

const var Panel1 = Content.getComponent("Panel1");

Panel1.setPaintRoutine(function(g)
{
    g.setColour(Colours.white);
    
    var path_data = {}; // pathStrokeStyle object  
    path_data.Thickness = 3.0;
    
	g.drawPath(p, this.getLocalBounds(10), path_data);
});

Class methods

addArc

Adds an arc to the path. Edit on GitHub

Path.addArc(var area, var fromRadians, var toRadians)

addArrow

Adds an arrow to the path from start [x, y] and end [x, y]. Edit on GitHub

Path.addArrow(var start, var end, var thickness, var headWidth, var headLength)

addEllipse

Adds an ellipse to the path. Edit on GitHub

Path.addEllipse(var area)

addPolygon

Adds a polygon to the path from the center [x, y]. Edit on GitHub

Path.addPolygon(var center, var numSides, var radius, var angle)

addQuadrilateral

Adds a addQuadrilateral to the path. Edit on GitHub

Path.addQuadrilateral(var xy1, var xy2, var xy3, var xy4)

addRectangle

Adds a rectangle to the path. Edit on GitHub

Path.addRectangle(var area)

addRoundedRectangle

Adds a rounded rectangle to the path. Edit on GitHub

Path.addRoundedRectangle(var area, var cornerSize)

addRoundedRectangleCustomisable

Adds a fully customisable rounded rectangle to the path. area[x,y,w,h], cornerSizeXY[x,y], boolCurves[bool,bool,bool,bool] Edit on GitHub

Path.addRoundedRectangleCustomisable(var area, var cornerSizeXY, var boolCurves)

addStar

Adds a star to the path from the center [x, y]. Edit on GitHub

Path.addStar(var center, var numPoints, var innerRadius, var outerRadius, var angle)

addTriangle

Adds a triangle to the path. Edit on GitHub

Path.addTriangle(var xy1, var xy2, var xy3)

clear

Clears the Path. Edit on GitHub

Path.clear()

closeSubPath

Closes the Path. Edit on GitHub

Path.closeSubPath()

contains

Checks whether a point lies within the path. This is only relevant for closed paths. Edit on GitHub

Path.contains(var point)

createStrokedPath

Creates a fillable path using the provided strokeData (with optional dot. Edit on GitHub

Path.createStrokedPath(var strokeData, var dotData)

cubicTo

Adds a cubic bezier curve with two sets of control point arrays [cx1,cy1] and [cx2,cy2], and the end point [x,y]. Edit on GitHub

Path.cubicTo(var cxy1, var cxy2, var x, var y)

fromString

Restores a path that has been converted into a string. Edit on GitHub

Path.fromString(String stringPath)

getBounds

Returns the area ([x, y, width, height]) that the path is occupying with the scale factor applied. Edit on GitHub

Path.getBounds(var scaleFactor)

getIntersection

Returns the point where a line ([x1, y1], [x2, y2]) intersects the path when appropriate. Returns false otherwise. Edit on GitHub

Path.getIntersection(var start, var end, bool keepSectionOutsidePath)

getLength

Returns the length of the path. Edit on GitHub

Path.getLength()

getPointOnPath

Returns the point at a certain distance along the path. Edit on GitHub

Path.getPointOnPath(var distanceFromStart)

getYAt

Returns the y coordinate of the first intersection at the given X position or undefined if no match. Edit on GitHub

Path.getYAt(float xPos)

lineTo

Adds a line to [x,y]. Edit on GitHub

Path.lineTo(var x, var y)

loadFromData

Loads a path from a data array. Edit on GitHub

Path.loadFromData(var data)

quadraticTo

Adds a quadratic bezier curve with the control point [cx,cy] and the end point [x,y]. Edit on GitHub

Path.quadraticTo(var cx, var cy, var x, var y)

roundCorners

Creates a version of this path where all sharp corners have been replaced by curves. Edit on GitHub

Path.roundCorners(var radius)

scaleToFit

Rescales the path to make it fit neatly into a given space. preserveProportions keeps the w/h ratio. Edit on GitHub

Path.scaleToFit(var x, var y, var width, var height, bool preserveProportions)

setBounds

Sets a (minimal) bounding box for the path.

Path.setBounds(var boundingBox)

By default a path's bounding box is defined by its shapes and set to the maximal rectangle area that covers all shapes in the path. In most path rendering functions this bounding box will be taken into account when scaling the path to the requested drawing dimensions.

In some cases (eg. when rendering a knob ring) this might lead to an unwanted skewing of the path, because the arc shape might not cover the entire area that it was painted on. In order to solve this, you would have to start two empty subpaths with the corners of your desired bounding box so that the scaling will ignore the actual shape of the arc.

This function is just a shortcut to this procedure and can be called with a Rectangle object for the ultimate code beauty:

const var Panel1 = Content.getComponent("Panel1");
const var ARC = -2.4;

Panel1.setPaintRoutine(function(g)
{
	g.fillAll(0x22FFFFFF);

	var p = Content.createPath();
	var r = Rectangle(this.getLocalBounds(5));
	var n = Rectangle(1.0, 1.0);
	
	// this adds an arc to the path AND sets the bounding box
	// to the exact dimensions of the arc shape
	p.addArc(n, -ARC, ARC);
	g.setColour(Colours.white);
	
	// drawing the path will now scale the bounding box to the
	// panel's bounds and skew the shape along the process
	g.drawPath(p, r, 10);
	g.drawAlignedText("UGGO!", r, "centred");
});

const var Panel2 = Content.getComponent("Panel2");

Panel2.setPaintRoutine(function(g)
{
	g.fillAll(0x22FFFFFF);

	var p = Content.createPath();
	var r = Rectangle(this.getLocalBounds(5));
	var n = Rectangle(1.0, 1.0);
	
	// now we set the bounding box to the normalised area
	p.setBounds(n);
	
	// this function basically does this, but shorter and leaner:
	//p.startNewSubPath(0.0, 0.0);
	//p.startNewSubPath(1.0, 1.0);
	
	// the bounding box is no longer dependent on the actual shape
	// of the arc
	p.addArc(n, -ARC, ARC);
	g.setColour(Colours.white);
	
	// now we can scale the bounding box correctly without skewing
	// the arc shape
	g.drawPath(p, r, 10);
	g.drawAlignedText("NOICE!", r, "centred");
});

startNewSubPath

Starts a new Path. It does not clear the path, so use 'clear()' if you want to start all over again. Edit on GitHub

Path.startNewSubPath(var x, var y)

toBase64

Creates a base64 encoded representation of the path. Edit on GitHub

Path.toBase64()

toString

Creates a string representation of this path. Edit on GitHub

Path.toString()