HISE Docs

Graphics


Class methods

addDropShadowFromAlpha

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

Graphics.addDropShadowFromAlpha(var colour, int radius)



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).

applyGamma

Applies a gamma correction to the current layer.

Graphics.applyGamma(float gamma)



applyGradientMap

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

Graphics.applyGradientMap(var darkColour, var brightColour)



applyHSL

Applies a HSL grading on the current layer.

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



applyMask

Applies a mask to the current layer.

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



applySepia

Applies an oldschool sepia filter on the current layer.

Graphics.applySepia()



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 ScriptShader object to the given area (relative to the ScriptPanel's boundaries).

applySharpness

Applies a sharpen / soften filter on the current layer.

Graphics.applySharpness(int delta)



applyVignette

Applies a vignette (dark corners on the current layer.

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



beginBlendLayer

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

Graphics.beginBlendLayer(String blendMode, float alpha)



beginLayer

Starts a new Layer.

Graphics.beginLayer(bool drawOnParent)



boxBlur

Applies a box blur to the current layer.

Graphics.boxBlur(var blurAmount)



desaturate

Removes all colour from the current layer.

Graphics.desaturate()



drawAlignedText

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

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



drawDropShadow

Draws a drop shadow around a rectangle.

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



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);
});


drawEllipse

Draws a ellipse in the given area.

Graphics.drawEllipse(var area, float lineThickness)



drawFFTSpectrum

Draws the spectrum of the FFT object to the panel.

Graphics.drawFFTSpectrum(var fftObject, var area)



drawFittedText

Tries to draw a text string inside a given space.

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



drawHorizontalLine

Draws a (non interpolated) horizontal line.

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



drawImage

Draws a image into the area.

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



drawLine

Draws a line.

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



drawMarkdownText

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

Graphics.drawMarkdownText(var markdownRenderer)



drawMultiLineText

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

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



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)



drawRepaintMarker

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

Graphics.drawRepaintMarker( String label)



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)



drawSVG

Draws a SVG object within the given bounds and opacity.

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



drawText

Draws a centered and vertically stretched text.

Graphics.drawText(String text, var area)



drawTriangle

Draws a triangle rotated by the angle in radians.

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



drawVerticalLine

Draws a (non interpolated) vertical line.

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



endLayer

flushes the current layer.

Graphics.endLayer()



fillAll

Fills the whole area with the given colour.

Graphics.fillAll(var colour)



fillEllipse

Fills a ellipse in the given area.

Graphics.fillEllipse(var area)



fillPath

Fills a Path.

Graphics.fillPath(var path, var area)



fillRect

Fills a rectangle with the given colour.

Graphics.fillRect(var area)



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)



fillTriangle

Fills a triangle rotated by the angle in radians.

Graphics.fillTriangle(var area, float angle)



flip

Flips the canvas at the center.

Graphics.flip(bool horizontally, var totalArea)



gaussianBlur

Applies gaussian blur to the current layer.

Graphics.gaussianBlur(var blurAmount)



getStringWidth

Returns the width of the string using the current font.

Graphics.getStringWidth(String text)



rotate

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

Graphics.rotate(var angleInRadian, var center)



setColour

Sets the current colour.

Graphics.setColour(var colour)



setFont

Sets the current font.

Graphics.setFont(String fontName, float fontSize)



setFontWithSpacing

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

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



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:

  1. The first colour
  2. The x-position of the first colour
  3. The y-position of the first colour
  4. The second colour
  5. The x-position of the second colour
  6. The y-position of the second colour
  7. whether the gradient is radial: true or false (optional)
  8. An additional colour (optional)
  9. The normalised position for the additional colour (eg. 0.5 if it should be in the middle) (optional)
  10. The next additional colour (optional)
  11. The normalised position for the second additional colour (optional)
  12. ...

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]);


setOpacity

Sets a global transparency level.

Graphics.setOpacity(float alphaValue)



Join Discussion Next: LorisManager