Graphics

The Graphics API gives you access to the Panel Components PaintRoutine . You can use it for the graphical drawing of a ScriptPanel .

Access it with the g keyword inside the PaintRoutine function and start drawing.

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

Panel1.setPaintRoutine(function(g)
{	
	g.setColour(Colours.white);
	g.drawRect([0,0,100,50], 2);
});

Class methods

addDropShadowFromAlpha

Adds a drop shadow based on the alpha values of the current image.

Graphics.addDropShadowFromAlpha(var colour, int radius)

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

Panel1.loadImage("{PROJECT_FOLDER}image.png", "image");

Panel1.setPaintRoutine(function(g)
{		
	g.drawImage("image", this.getLocalBounds(0), 0, 0); 
	g.addDropShadowFromAlpha(Colours.black, 100); // borderShadow from 1 - 100
});

addNoise

Adds noise to the current layer.

Graphics.addNoise(var noiseAmount)

This adds pixelated noise to the current graphics layer. The parameter can either be a double number that will indicate the "gain" of the noise (= the transparency), or you can supply a JSON object that allows more fine grained control over the noise parameters.

Property	Type	Description
`alpha`	double	the transparency of the noise layer.
`monochromatic`	bool	whether the noise should be black & white only
`scaleFactor`	float	a scale factor that is applied to the noise.
`area`	`[x, y, w, h]`	the area that should be painted with the noise.

HISE will cache internal images filled with the noise for performance reasons, however this means that using this method increases the memory usage (depending on the noise area size).

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

Panel1.setPaintRoutine(function(g)
{	
	g.beginLayer(0);
	
	g.addNoise(0.07); // 0 -> 0.999
	
	g.endLayer();
});

applyGamma

Applies a gamma correction to the current layer.

Graphics.applyGamma(float gamma)

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

Panel1.setPaintRoutine(function(g)
{	
	g.beginLayer(1);
	g.setGradientFill([Colours.black, 0, 0,
				   Colours.white, this.getWidth(), 0,
				   false]);
	g.fillRect(this.getLocalBounds(0));
	
	g.applyGamma(1.5); // baseline 1
	
	g.endLayer();
});

applyGradientMap

Applies a gradient map to the brightness level of the current layer.

Graphics.applyGradientMap(var darkColour, var brightColour)

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

Panel1.setPaintRoutine(function(g)
{	
	g.beginLayer(1);

	g.setColour(Colours.grey);
	g.fillRect(this.getLocalBounds(0));
	g.applyGradientMap(Colours.withBrightness(Colours.blue, 0.5), Colours.withBrightness(Colours.red, 0.7));
	
	g.endLayer();

});

applyHSL

Applies a HSL grading on the current layer.

Graphics.applyHSL(float hue, float saturation, float lightness)

const var Panel1 = Content.getComponent("Panel1");
Panel1.loadImage("{PROJECT_FOLDER}image.png", "image");

Panel1.setPaintRoutine(function(g)
{	
	g.beginLayer(1);
	g.drawImage("image", this.getLocalBounds(0),0,0);
	
	g.applyHSL(270, 100, 0); // Hue: 0 - 360, Saturation: 0 - 100: Lightness: 0 - 100
		
	g.endLayer();
});

See HSL on Wikipedia for more about HSL.

applyMask

Applies a mask to the current layer.

Graphics.applyMask(var path, var area, bool invert)

const var Panel1 = Content.getComponent("Panel1");
Panel1.loadImage("{PROJECT_FOLDER}image.png", "image");

const var c = Content.createPath();

c.startNewSubPath(0.0, 0.0);
c.lineTo(1.0, 1.0);
c.lineTo(1.0, 0.0);

Panel1.setPaintRoutine(function(g)
{	
	g.beginLayer(1);
	g.drawImage("image", this.getLocalBounds(0),0,0);
	
	g.applyMask(c, this.getLocalBounds(0), 0); // 1 to invert the mask. 
	
	g.endLayer();

});

applySepia

Applies an oldschool sepia filter on the current layer.

Graphics.applySepia()

const var Panel1 = Content.getComponent("Panel1");
Panel1.loadImage("{PROJECT_FOLDER}image.png", "image");

Panel1.setPaintRoutine(function(g)
{	
	g.beginLayer(0);
	
	g.drawImage("image", this.getLocalBounds(0),0,0);
	
	g.applySepia();
	
	g.endLayer();
});

applyShader

Applies an OpenGL shader to the panel. Returns false if the shader could not be compiled.

Graphics.applyShader(var shader, var area)

You can use this method in order to render the GLSL ScriptShader object to the given area (relative to the ScriptPanel's boundaries).

const var Panel1 = Content.addPanel("Panel1", 0, 0);

const var sh = Content.createShader("GLSL/init.glsl");

PAnel1.setPaintRoutine(function(g)
{
	g.applyShader(sh, this.getLocalBounds(0));
});

applySharpness

Applies a sharpen / soften filter on the current layer.

Graphics.applySharpness(int delta)

const var Panel1 = Content.getComponent("Panel1");
Panel1.loadImage("{PROJECT_FOLDER}image.png", "image");

Panel1.setPaintRoutine(function(g)
{	
	g.beginLayer(1);
	g.drawImage("image", this.getLocalBounds(0),0,0);
	
	g.applySharpness(1); // apply a sharpness filter
	
	g.endLayer();

});

applyVignette

Applies a vignette (dark corners on the current layer.

Graphics.applyVignette(float amount, float radius, float falloff)

const var Panel1 = Content.getComponent("Panel1");
Panel1.loadImage("{PROJECT_FOLDER}image.png", "image");

Panel1.setPaintRoutine(function(g)
{	
	g.beginLayer(1);
	
	g.drawImage("image", this.getLocalBounds(0),0,0);
	
	g.applyVignette(10, 1, 0.5); // 
	
	g.endLayer();

});

beginBlendLayer

Begins a new layer that will use the given blend effect.

Graphics.beginBlendLayer(String blendMode, float alpha)

const var Panel1 = Content.getComponent("Panel1");
Panel1.loadImage("{PROJECT_FOLDER}image.png", "image");

Panel1.setPaintRoutine(function(g)
{	
	g.beginBlendLayer("Phoenix", 1);
	
	g.drawImage("image", this.getLocalBounds(0),0,0);
	
	g.endLayer();
});

Modes

"Normal",
"Lighten",
"Darken",
"Multiply",
"Average",
"Add",
"Subtract",
"Difference",
"Negation",
"Screen",
"Exclusion",
"Overlay",
"SoftLight",
"HardLight",
"ColorDodge",
"ColorBurn",
"LinearDodge",
"LinearBurn",
"LinearLight",
"VividLight",
"PinLight",
"HardMix",
"Reflect",
"Glow",
"Phoenix"

beginLayer

Starts a new Layer.

Graphics.beginLayer(bool drawOnParent)

Create a new layer with beginLayer() and endLayer() and fill with the code in between.

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

Panel1.setPaintRoutine(function(g)
{	
	g.beginLayer(true); 
	
	g.endLayer();
});

boxBlur

Applies a box blur to the current layer.

Graphics.boxBlur(var blurAmount)

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

Panel1.loadImage("{PROJECT_FOLDER}image.png", "image");

Panel1.setPaintRoutine(function(g)
{	
	g.beginLayer(1);
	g.drawImage("image", this.getLocalBounds(0),0,0);
	
	g.boxBlur(10); // apply box blur 0 - 100
	
	g.endLayer();
});

desaturate

Removes all colour from the current layer.

Graphics.desaturate()

Completely desaturates the image to grayscale.

const var Panel1 = Content.getComponent("Panel1");
Panel1.loadImage("{PROJECT_FOLDER}image.png", "image");

Panel1.setPaintRoutine(function(g)
{	
	g.beginBlendLayer("Phoenix", 1);
	
	g.drawImage("image", this.getLocalBounds(0),0,0);
	
	g.desaturate();
	
	g.endLayer();
});

drawAlignedText

Draws a text with the given alignment (see the Label alignment property).

Graphics.drawAlignedText(String text, var area, String alignment)

Engine.loadFontAs("{PROJECT_FOLDER}fonts/Nunito-Regular.ttf", "nunito");

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

Panel1.setPaintRoutine(function(g)
{	
	g.setFont("nunito", 32);
	g.setColour(Colours.white);
	g.drawAlignedText("Hello World", this.getLocalBounds(0), "top");
	
});

Alignment positions

"left"
"right"
"top"
"bottom"
"centred"
"centredTop"
"centredBottom"
"topLeft"
"topRight"
"bottomLeft"
"bottomRight"

drawAlignedTextShadow

Renders a (blurred) shadow for the text.

Graphics.drawAlignedTextShadow(String text, var area, String alignment, var shadowData)

This method uses the awesome melatonin blur library for a fast text shadow rendering. It has the similar parameters as the drawAlignedText function, but expects a JSON object with the shadow parameters as additional last argument. The JSON object can have these properties that will define the appearance of the shadow:

Property	Type	Description
`Colour`	int or String or constant	the colour of the shadow.
`Offset`	`[x, y]`	A point array indicating the offset of the shadow.
`Radius`	int	the amount of blur in pixels. 0 means no blur at all.
`Spread`	int	the scaling of the shadow. Using positive values will make the shadow bigger.
`Inner`	bool	Whether to render a outer shadow (drop shadow) or an inner shadow (inner glow).

Here's some funk for y'all:

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

Panel1.setPaintRoutine(function(g)
{
	g.setFontWithSpacing("Comic Sans MS", 40.0, 0.05);
	g.drawAlignedTextShadow("funky", this.getLocalBounds(0), "centred", { "Colour": Colours.red, "Offset": [0, 4], "Radius": 10});
	g.drawAlignedTextShadow("funky", this.getLocalBounds(0), "centred", { "Colour": Colours.green, "Offset": [2, 2], "Radius": 0});
	g.setColour(Colours.white);
	g.drawAlignedText("funky", this.getLocalBounds(0), "centred");
});

drawDropShadow

Draws a drop shadow around a rectangle.

Graphics.drawDropShadow(var area, var colour, int radius)

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

Panel1.setPaintRoutine(function(g)
{	
	g.drawDropShadow(this.getLocalBounds(12), Colours.black, 20);
	g.setColour(Colours.grey);
	g.fillRect(this.getLocalBounds(12));
});

drawDropShadowFromPath

Draws a drop shadow from a path.

Graphics.drawDropShadowFromPath(var path, var area, var colour, int radius, var offset)

This will draw a blurred version of the path that you can use to create a drop shadow effect.

const var Panel = Content.addPanel("Panel", 0, 0);

const var p = Content.createPath();

// pass an array with numbers to load SVG images
p.loadFromData([110,109,0,245,207,67,128,217,36,67,108,0,236,189,67,128,89,69,67,108,0,
                245,207,67,128,217,101,67,108,192,212,207,67,128,53,81,67,98,217,93,211,
                67,51,180,80,67,123,228,219,67,2,123,91,67,128,144,224,67,0,149,101,67,
                98,39,209,224,67,29,247,89,67,79,60,223,67,36,224,61,67,0,245,207,67,0,
                12,54,67,108,0,245,207,67,128,217,36,67,99,109,128,33,193,67,0,168,88,
                67,108,0,66,193,67,0,76,109,67,98,231,184,189,67,77,205,109,67,69,50,
                181,67,126,6,99,67,64,134,176,67,128,236,88,67,98,154,69,176,67,99,138,
                100,67,49,218,177,67,174,80,128,67,128,33,193,67,192,58,132,67,108,128,
                33,193,67,0,212,140,67,108,192,42,211,67,0,40,121,67,108,128,33,193,67,
                0,168,88,67,99,101,0,0]);

Panel.setPaintRoutine(function(g)
{
    g.fillAll(Colours.grey);
    var area = [20, 20, 100, 100];
    
    g.drawDropShadowFromPath(p, area, 0x88000000, 5, [0, 5]);
    g.setColour(Colours.white);
    g.fillPath(p, area);
});

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

// that's a poor circle, but the blur will save us...
var circlePath = Content.createPath();
circlePath.startNewSubPath(0.5, 0);
circlePath.quadraticTo(1.0, 0.0, 1.0, 0.5);
circlePath.quadraticTo(1.0, 1.0, 0.5, 1.0);
circlePath.quadraticTo(0.0, 1.0, 0.0, 0.5);
circlePath.quadraticTo(0.0, 0.0, 0.5, 0.0);

Panel1.set("width", Panel1.get("height"));

Panel1.setPaintRoutine(function(g)
{
	g.drawDropShadowFromPath(circlePath, this.getLocalBounds(50), Colours.black, 50, [0, 0]);
});

drawEllipse

Draws a ellipse in the given area.

Graphics.drawEllipse(var area, float lineThickness)

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

Panel1.setPaintRoutine(function(g)
{	
	g.setColour(Colours.white);
	g.drawEllipse([10,10,80,50], 1.5);
});

drawFFTSpectrum

Draws the spectrum of the FFT object to the panel.

Graphics.drawFFTSpectrum(var fftObject, var area)

under construction

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

const var fft = Engine.createFFT();

Panel1.setPaintRoutine(function(g)
{	
	g.setColour(Colours.white);
	g.drawFFTSpectrum(fft, this.getLocalBounds(0));

});

drawFittedText

Tries to draw a text string inside a given space.

Graphics.drawFittedText(String text, var area, String alignment, int maxLines, float scale)

old multi-line text method

Engine.loadFontAs("{PROJECT_FOLDER}fonts/Nunito-Regular.ttf", "nunito");

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

Panel1.setPaintRoutine(function(g)
{	
	g.setFont("nunito", 32);
	g.setColour(Colours.white);
	g.drawFittedText("Hello World", this.getLocalBounds(0), "topLeft", 2, 20);
});

drawHorizontalLine

Draws a (non interpolated) horizontal line.

Graphics.drawHorizontalLine(int y, float x1, float x2)

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

Panel1.setPaintRoutine(function(g)
{	
	g.setColour(Colours.white);
	g.drawHorizontalLine(0, 0, this.getWidth()); // xStart, yStart, length
});

drawImage

Draws a image into the area.

Graphics.drawImage(String imageName, var area, int xOffset, int yOffset)

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

Panel1.loadImage("{PROJECT_FOLDER}image.png", "image"); // Load image.png from the "Images" folder

Panel1.setPaintRoutine(function(g)
{	
	g.drawImage("image", this.getLocalBounds(0), 0, 0); // draw the image in the Panel boundaries.
	
});

drawLine

Draws a line.

Graphics.drawLine(float x1, float x2, float y1, float y2, float lineThickness)

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

Panel1.setPaintRoutine(function(g)
{	
	g.setColour(Colours.white);
	g.drawLine(0, 100, 50, 100, 1.2); // x1,x2,y1,y2,linewidth
});

drawMarkdownText

Draws the text of the given markdown renderer to its specified area.

Graphics.drawMarkdownText(var markdownRenderer)

Draw a MarkdownRenderer element on a panel.

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

const var markd = Content.createMarkdownRenderer();
markd.setTextBounds(Panel1.getLocalBounds(0));

markd.setText("
## Heading
Explain explain explain
");

Panel1.setPaintRoutine(function(g)
{	
	g.drawMarkdownText(markd);
});

drawMultiLineText

Break to new lines when the text becomes wider than maxWidth.

Graphics.drawMultiLineText(String text, var xy, int maxWidth, String alignment, float leading)

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

const var text = "Lorem ipsum HISEorium explanadum in excelsis christophorum non delandam improprium contenatio cimex."

Panel1.setPaintRoutine(function(g)
{	
	g.setColour(Colours.white);
	g.drawMultiLineText(text, [0,20], this.getWidth(), "left", 2.); // text, width, alignment, lineHeight
});

drawPath

Draws the given path.

Graphics.drawPath(var path, var area, var strokeStyle)

The stroke style can be either just a number (then it determines the stroke thickness), or a JSON object that allows a more fine grained control over the stroke behaviour:

const var c = Content.createPath();

c.startNewSubPath(0.0, 0.0);
c.lineTo(0.0, 1.0);
c.lineTo(1.0, 0.0);
c.lineTo(0.5, 1.0);

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

Panel1.setPaintRoutine(function(g)
{
    g.fillAll(0x22FFFFFF);
    g.setColour(Colours.white);
    
    var p = {};               // Pick one of these:
    p.EndCapStyle = "butt";   // ["butt", "square", "rounded"]
    p.JointStyle = "rounded"; // ["mitered", "curved","beveled"]
    p.Thickness = 12.0;
    
	g.drawPath(c, this.getLocalBounds(p.Thickness), p);
});

For a detailed explanation of these properties, take a look at the JUCE API documentation here:

JUCE PathStrokeStyle API

drawRect

Draws a rectangle.

Graphics.drawRect(var area, float borderSize)

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

Panel1.setPaintRoutine(function(g)
{	
	g.setColour(Colours.white);
	g.drawRect(this.getLocalBounds(0), 3);
});

drawRepaintMarker

fills the entire component with a random colour to indicate a UI repaint.

Graphics.drawRepaintMarker( String label)

Draws a differently colored background each time the panel is redrawn. This can be used to debug the paint routine.

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

Panel1.setPaintRoutine(function(g)
{	
	g.drawRepaintMarker(""); 
});

drawRoundedRectangle

Draws a rounded rectangle. cornerData can be either a float number (for the corner size) or a JSON object for more customization options.

Graphics.drawRoundedRectangle(var area, var cornerData, float borderSize)

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

Panel1.setPaintRoutine(function(g)
{	
	g.setColour(Colours.white);
	
	// area, float value (0-50) for all corners or object with {Cornersize:15, Rounded:[1,1,1,1]}, lineWidth
	g.drawRoundedRectangle([8,8,90,60], {CornerSize:15, Rounded:[0,1,1,0]}, 1.5); 
});

drawSVG

Draws a SVG object within the given bounds and opacity.

Graphics.drawSVG(var svgObject, var bounds, float opacity)

Draw a SVG to the panel. You first have to create a SVG object with Content.createSVG("Base64String") and then pass it to the drawSVG function. You can create the Base64 encoded SVG string with the SVG to Path Converter that you can find under Tools > Scripting Tools .

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

const var svg = Content.createSVG("552.nT6K8CFjCTOD.Xa2dUB7vwL.SvXp6TpBfQoF8BK9fB04advjZYtXueJWWylbAdFn2PtHYAvT.HE.5rS67tttXTRauwfO3CIDiu+uEnPhmjIRhwHzJhQF3KBCMfvDQ7t31dIDgESh.gDAfDfAG.yX3jEmynrvT6sGDhQgIS.mtvWqbE19fR+gS37cSa4dYTpb.jfkyJYy3PyjkcyHqiHkbkmw0xosaVsFbxVQosIEihh9Mv2rJRRobNsgevG537uF5+jOIbpRFgN6kaiccsXO3.R4Cmv1V2Nn01x+OFiaUWLMJ8Bwqzz3Oc91UV8SE5cH4u3PqUGWVebIyRsw48BhlN9rBwrz797idlkWt7DT4p2TTfSTz4L1vT586Bx6wT5los6KELGYsD9l0vxX2Hq2aZ2rpGVVYb..FbwsEgrDMmMuWo0KZZndSzCMpw+ZcoVcYs9Hc4C0.zG4SZc4IxoRn2A3j0CaSoU8met3T+XD9nfkG5I.iKsD8g7mm4CjWcfU+g57voNdPnfPf.C.YHCuCPQ..D.VbASWpJIv.zgSfoDP4fAkPqLUiDXB.n..V7tA3Hb.iq3e.SSDCbUQzX3KnvI9YcxM6fibJgmc42KQ3z.uEElWxrMVBU.J1gKFfMkE9fPWLPtyXTAFX.gIKvPCvjUfnO.FubCO.OzFZEtB9CDBDLLstdfvZ0LokAGD6UR.RFeMvXSxYionq.qoALngCSAwAtBX.Fo.");

Panel1.setPaintRoutine(function(g)
{	
	g.setColour(Colours.white);
	g.drawSVG(svg, this.getLocalBounds(0), 1);
});

drawText

Draws a centered and vertically stretched text.

Graphics.drawText(String text, var area)

This will draw a text string to the center of the panel. If you don't specify your own font it will use the HISE default font.

Engine.loadFontAs("{PROJECT_FOLDER}fonts/Nunito-Regular.ttf", "nunito");

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

Panel1.setPaintRoutine(function(g)
{	
	g.setFont("nunito", 32);
	g.setColour(Colours.white);
	g.drawText("Hello World", this.getLocalBounds(0));
});

drawTriangle

Draws a triangle rotated by the angle in radians.

Graphics.drawTriangle(var area, float angle, float lineThickness)

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

Panel1.setPaintRoutine(function(g)
{	
	g.setColour(Colours.white);
	g.drawTriangle(this.getLocalBounds(0), Math.toRadians(180), 2);
});

drawVerticalLine

Draws a (non interpolated) vertical line.

Graphics.drawVerticalLine(int x, float y1, float y2)

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

Panel1.setPaintRoutine(function(g)
{	
	g.setColour(Colours.white);
	g.drawVerticalLine(this.getWidth()/2, 0, this.getHeight()); // xStart, yStart, length
});

endLayer

flushes the current layer.

Graphics.endLayer()

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

Panel1.setPaintRoutine(function(g)
{	
	g.beginLayer(true); 
	
	 // fill the layer.
	
	g.endLayer();
});

fillAll

Fills the whole area with the given colour.

Graphics.fillAll(var colour)

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

Panel1.setPaintRoutine(function(g)
{	
	g.fillAll(Colours.grey);	
});

fillEllipse

Fills a ellipse in the given area.

Graphics.fillEllipse(var area)

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

Panel1.setPaintRoutine(function(g)
{	
	g.setColour(Colours.pink);
	g.fillEllipse([0,0,this.getWidth(), this.getHeight()]);
});

fillPath

Fills a Path.

Graphics.fillPath(var path, var area)

const var p = Content.createPath();

p.startNewSubPath(0.0, 0.0);
p.lineTo(0, 0);
p.lineTo(0.5, 1);
p.lineTo(1, 0);

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

Panel1.setPaintRoutine(function(g)
{	
	g.setColour(Colours.withAlpha(Colours.white, 0.5));	
	g.fillPath(p, this.getLocalBounds(0));
});

fillRect

Fills a rectangle with the given colour.

Graphics.fillRect(var area)

Panel1.setPaintRoutine(function(g)
{	
	g.setColour(Colours.white);	
	g.fillRect([0,0,this.getWidth(),this.getHeight()]);
});

fillRoundedRectangle

Fills a rounded rectangle. cornerData can be either a float number (for the corner size) or a JSON object for more customization options.

Graphics.fillRoundedRectangle(var area, var cornerData)

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

Panel1.setPaintRoutine(function(g)
{	
	g.setColour(Colours.white);
	g.fillRoundedRectangle(this.getLocalBounds(10), 25); // area, rounded 0 - 100+
});

fillTriangle

Fills a triangle rotated by the angle in radians.

Graphics.fillTriangle(var area, float angle)

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

Panel1.setPaintRoutine(function(g)
{	
	g.setColour(Colours.white);	
	g.fillTriangle([0,0,this.getWidth(), this.getHeight()], Math.toRadians(90));
});

flip

Flips the canvas at the center.

Graphics.flip(bool horizontally, var totalArea)

Flips the Panel horizontally. Set the boolean to
0 to flip.

const var p = Content.createPath();

p.startNewSubPath(0.0, 0.0);
p.lineTo(0, 0);
p.lineTo(0.8, 1);
p.lineTo(1, 0);

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

Panel1.setPaintRoutine(function(g)
{	
	g.setColour(Colours.withAlpha(Colours.white, 0.5));	
	g.flip(0, this.getLocalBounds(0));
	g.fillPath(p, this.getLocalBounds(0));
});

gaussianBlur

Applies gaussian blur to the current layer.

Graphics.gaussianBlur(var blurAmount)

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

Panel1.setPaintRoutine(function(g)
{	
	g.beginLayer(true);
	
	g.setColour(Colours.white);
	g.fillRoundedRectangle(this.getLocalBounds(10), 50);
	g.gaussianBlur(12);
	
	g.endLayer();
});

getStringWidth

Returns the width of the string using the current font.

Graphics.getStringWidth(String text)

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

Panel1.setPaintRoutine(function(g)
{	
	Console.print(g.getStringWidth("Hello"));
});

rotate

Rotates the canvas around center [x, y] by the given amount in radian.

Graphics.rotate(var angleInRadian, var center)

Use this with a path object.

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

const var p = Content.createPath();

p.startNewSubPath(0.0, 0.0);
p.lineTo(0, 0);
p.lineTo(0.8, 1);
p.lineTo(1, 0);

Panel1.setPaintRoutine(function(g)
{	
	g.setColour(Colours.withAlpha(Colours.white, 0.5));	
	g.rotate(Math.toRadians(180), [this.getWidth()/2,this.getHeight()/2]);
	g.fillPath(p, this.getLocalBounds(0));
});

setColour

Sets the current colour.

Graphics.setColour(var colour)

Set a color for an element to draw. For many elements you first have to set a color to visualise the draw or fill call.

After typing the "Colours." handle you can select a colour by name of a predefined list. Take a look at the Colours API for more colours options.

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

Panel1.setPaintRoutine(function(g)
{	
	g.setColour(Colours.white);
	g.fillEllipse([0,0,50,50]);

});

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

Panel1.setPaintRoutine(function(g)
{	
	g.setColour(Colours.white);
	g.fillEllipse([0,0,50,50]);
	
	g.setColour(Colours.grey);
	g.fillEllipse([55,0,50,50]);
	
	g.setColour(Colours.black);
	g.fillEllipse([110,0,50,50]);
	
	g.setColour(Colours.red);
	g.fillEllipse([0,55,50,50]);
	
	g.setColour(Colours.green);
	g.fillEllipse([55,55,50,50]);
	
	g.setColour(Colours.dodgerblue);
	g.fillEllipse([110,55,50,50]);		
});

setFont

Sets the current font.

Graphics.setFont(String fontName, float fontSize)

Set a font, a color and draw some text.

Load a font from the Image folder with Engine.setFontAs . Then you can set the font by its given fontID.

Engine.loadFontAs("{PROJECT_FOLDER}Nunito-Regular.ttf", "nunito");

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

Panel1.setPaintRoutine(function(g)
{	
	g.setFont("nunito", 48);
	g.setColour(Colours.white);
	g.drawAlignedText("hello", this.getLocalBounds(0), "top");
});

setFontWithSpacing

Sets the current font with the specified spacing between the characters.

Graphics.setFontWithSpacing(String fontName, float fontSize, float spacing)

Engine.loadFontAs("{PROJECT_FOLDER}fonts/Nunito-Regular.ttf", "nunito");

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

Panel1.setPaintRoutine(function(g)
{	
	g.setFontWithSpacing("nunito", 36, 0.08); // from 0 to 1 over the whole width of the panel.
	g.setColour(Colours.white);
	g.drawAlignedText("hello", this.getLocalBounds(0), "top");
});

setGradientFill

Sets the current gradient via an array [Colour1, x1, y1, Colour2, x2, y2]

Graphics.setGradientFill(var gradientData)

This method allows you to set the current brush to a gradient. The parameter you pass in must be an array that has at least 6 elements:

The first colour
The x-position of the first colour
The y-position of the first colour
The second colour
The x-position of the second colour
The y-position of the second colour
whether the gradient is radial: true or false (optional)
An additional colour (optional)
The normalised position for the additional colour (eg. 0.5 if it should be in the middle) (optional)
The next additional colour (optional)
The normalised position for the second additional colour (optional)
...

Examples

// A blurry white ball in the middle
g.setGradientFill([Colours.white, 100.0, 100.0,
				   Colours.black, 50.0, 50.0,
				   true]);

// A top down gradient with a black bar in the middle and white at the edges
g.setGradientFill([Colours.white, 0.0, 0.0,
				   Colours.white, 0.0, 100.0,
				   false,
				   Colours.black, 0.5]);

Panel1.setPaintRoutine(function(g)
{	
	g.setGradientFill([Colours.white, 0 , 0,
				   Colours.black, this.getWidth()/1.5, 0,
				   false]);
				   
	g.fillRect(this.getLocalBounds(0));
});

setOpacity

Sets a global transparency level.

Graphics.setOpacity(float alphaValue)

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

Panel1.loadImage("{PROJECT_FOLDER}image.png", "image");

Panel1.setPaintRoutine(function(g)
{	
	g.setOpacity(0.3);	
	g.drawImage("image", this.getLocalBounds(0), 0, 0); 
});

Join Discussion Next: LorisManager

Do Mayer
17.07.2024