Save gradient background to pdf

advanced
#1

Hello,
I’m trying to save gradient background and some geometry to pdf with ofBeginSaveScreenAsPDF(), but with no luck.

Tried this one:

ofBackgroundGradient(ofColor::red, ofColor::green, OF_GRADIENT_LINEAR);
ofDrawCircle(30,30, 40);

but it doesn’t save background: screenshot-2016-03-20-23-42-51-158.pdf

also tried this one:

for (int i = 0; i < ofGetHeight(); i++)
{
	ofSetColor(gradient);
	ofLine(0, i, ofGetWidth(), i);
}

but output is not satisfying: screenshot-2016-03-20-23-36-25-398.pdf

Maybe anyone has a solution how to save gradient bg to PDF file?

Thanks,

Bartosh

#2

background gradient is kind of a weird function in OF is very openGL specific and i think the only one that is not happening on the renderers but dirextly on the function call. because of that there’s no implementation in other renderers that opengl.

also there’s no way to specify gradients currently. cairo, the library we use to write to pdfs allows to specify gradients though so you might be able to create a cairo renderer manually set it as your renderer backend using ofSetCurrentRenderer and then manually call the necesary cairo calls whenever you need to specify the gradient.

also if you want to open an issue in github regarding being able to do gradients in general, it’s something we could contemplate implementing in future versions

#3

Hello,
I finally decided to go for simple approach. As my graphics are just gradient bg and circles around,
I solved the issue by saving primitives to svg xml file:

<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(53,131,103);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(196,93,137);stop-opacity:1" />
</linearGradient>
<rect x="0" fill="url(#grad1)" width="1024" height="768" />

So basically I am using ofxXmlsettings to save my scene into svg:

(...)
void save()
		{
			output.pushTag("svg");
			
			// linearGradient
			output.pushTag("linearGradient");
			string topColor = "stop-color:rgb("+ ofToString((int)start.r) + "," + ofToString((int)start.g) + "," + ofToString((int)start.b) + ");stop-opacity:1";
			string bottomColor = "stop-color:rgb(" + ofToString((int)end.r) + "," + ofToString((int)end.g) + "," + ofToString((int)end.b) + ");stop-opacity:1";
			output.setAttribute("stop", "style", topColor, 0);
			output.setAttribute("stop", "style", bottomColor, 1);
			output.popTag();

			// clear old Circles
			int numTags = output.getNumTags("ellipse");
			for (int i = 0; i < numTags; i++)
			{
				output.removeTag("ellipse", 0);
			}

            // create new circles
			for (int i = 0; i < circles.size(); i++)
			{
				output.addTag("ellipse");
				//  <ellipse opacity="0.50" fill="rgb(50,50,50)" cx="220" cy="70" rx="55" ry="55" />
				output.setAttribute("ellipse", "opacity", 1.0, i);
				string fill = "rgb(" + ofToString((int)circles[i].color.r) + "," + ofToString((int)circles[i].color.g) + "," + ofToString((int)circles[i].color.b) + ")";
				
				output.setAttribute("ellipse", "fill", ofToString(fill), i);
				output.setAttribute("ellipse", "cx", circles[i].position.x, i);
				output.setAttribute("ellipse", "cy", circles[i].position.y, i);
				output.setAttribute("ellipse", "rx", circles[i].size, i);
				output.setAttribute("ellipse", "ry", circles[i].size, i);
			}
			    output.popTag();
			    output.save("screenshot-" + ofGetTimestampString() + ".svg");
			}
(...)

result:
testing.svg

Thanks!