Creating vector graphics in JUCE


#1

Hi everyone,

Is there a way to use existing component paint calls to create vector graphics instead of raster graphics? I couldn’t find anything and it doesn’t seem to be possible, but I thought I’d ask anyway.

Thanks!

Geert


#2

Hi Geert,

What sort of vector graphics did you have in mind? JUCE has considerable support in this area; I only use vector graphics for my GUIs.

You can certainly draw simple shapes in paint() using the built-in graphics calls, such as g.drawEllipse or g.fillRoundedRectangle. The next level up is using Path objects to combine various shapes into one and/or draw polygons with an arbitrary number of vertices, which also works really well. For anything particularly elaborate I tend to use SVG assets (typically as BinaryData), loading and positioning them as desired. There are a few threads about tips and tricks for doing this kind of thing on the forum; here is one such example:

I hope I’ve understood your request. If not, please could you clarify what you’re trying to do a little more? :slight_smile:


#3

I might not have been clear. Yes, I use the graphics drawing calls to create all the JUCE graphics in a vector way. However, these seem to be always rendered in a pixel format and if I want to write them out to a file, my only choices seem to be raster file formats (PNG, …). I was wondering if, given that the originating drawing calls are vector-based, if it was possible to write out SVG, EPS, PDF, … so that generated files are scalable and resolution independent.


#4

Haha right, I did wonder about whether you meant something along those lines. :wink:

Sorry, I’m probably not going to be any help but here are my thoughts anyway. I don’t know of any vector format output facilities inside JUCE per se, but I haven’t investigated that so there could be something tucked away.

SVG is XML-based so there would be some built-in JUCE support for this, at least indirectly, and I would start looking there. Mapping your vector structures neatly to SVG elements would be my focus: if you’re using Paths, the job feels a lot like reversing the process of createFromSVG or parseSVGPath.

Good luck!


#5

Have a look at this old (mostly abandoned) class:
https://www.juce.com/doc/classLowLevelGraphicsPostScriptRenderer

It does this kind of thing for postscript, so yes, could certainly be done… I think a LowLevelGraphics class that renders to SVG would be a really interesting thing to build.


#6

Thanks a lot Jules! That does work technically, but due to the abandoned nature I guess, the rendering is quite off. I’ll investigate if creating an SVG version might be something that I can get the time and resources for.


#7

Hey @gbevin, you may be interested in this SVG context I started recently:

It’s pretty new so it could definitely still use some work (i.e. some child component rendering issues when using paintEntireComponent()) but it gets most of the job done!