Drop Shadow for Text

[aaronventure]

Currently it's not possible to drop-shadow text, as text cannot be added to a path object. Goes for paint routines and LAF.

The missing method would either draw drop shadow for the text, could use the same parameters like drawAlignedText, with added radius of course.

[d.healey]

@aaronventure Does addDropShadowFromAlpha work?

[aaronventure]

@d-healey on a panel paint routine no, that's meant for inset shadow, shading on top of the text itself.

Also it breaks if you zoom past 200%, at least in HISE :face_with_tears_of_joy:

[Christoph Hart]

Yes, this should work:

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

Panel1.setPaintRoutine(function(g)
{
	g.setColour(Colours.red);
	g.setFont("Lato Bold", 24.0);
	g.drawAlignedText("FUNKY", this.getLocalBounds(0), "centred");
	g.addDropShadowFromAlpha(Colours.red, 15);
	g.setColour(Colours.white);
	g.drawAlignedText("FUNKY", this.getLocalBounds(0), "centred");
});

The melatonin blur has a text shadow renderer, so in the long run this will find its way into the HISE Graphics API, but it's not on my immediate TODO list.

[Christoph Hart]

Also it breaks if you zoom past 200%

Everything breaks if you zoom past 200% (with retina displays you're then at 400% zoom and I had to cap it somewhere).

[aaronventure]

@Christoph-Hart Alright gotcha, this is good enough for now.

It seems like the shadow is always the same size no matter the zoom (drop shadow from path scales with zoom properly) and there's a size cap as well?

[aaronventure]

@Christoph-Hart If you have a graphic that uses more than one color but want to simulate a glow, there's no clear best method without resorting to the blur function (which is bit of a mess).

Option 1: Use a separate panel for each color. Not ideal, hot mess to iterate.

Option 2: Use layers with g.dropShadowFromAlpha. Putting anything in a layer rasterises it, which means clarity with anything other than non-rotated rectangles suffers when zooming. There's also the dropShadowFromAlpha bug where it doesn't scale if it's called from within a layer https://github.com/christophhart/HISE/issues/525

I hear your comment about a future dropShadowFromText implementation using melatonin blur, and that would pretty much cover it all.

Until then, how crazy would it be to add a g.dropShadowFromAlphaColoured that doesn't take a color because it samples the colors it causes drop shadows for, but takes opacity instead?

[Christoph Hart]

The future is now.

HISE | Scripting | Graphics

Panel drawing functions

(docs.hise.audio)

[aaronventure]

@Christoph-Hart Oh boy. Instant docs, too!

Thanks. This was the final missing piece for creating glowing effects.

That library looks spankin'. These benchmarks look really good. JUCE looks horrible in there for standard drop shadows too.

[aaronventure]

@Christoph-Hart Any chance this can make it to other drop shadow methods soon? I'm profiling my UI right now and the hungriest call is by far drawDropShadowFromAlpha. Using one of the two blur options is a few times worse.

Btw the Perfetto implementation gets me all hot and bothered!