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:
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
orfalse
(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);
});