Cairo beginners question

BlitzMax Forums/Brucey's Modules/Cairo beginners question

Kistjes

(Posted 2009) [#1]

Hi,

I was pleased to see the possibilities of the cairo module!

Very often I need to recreate the cairo graphic(s) every frame before displaying them on screen. What is the best way of doing so (performance wise)?

* If I only want to change color, blend or alpha I thought it was a good idea to create an image for the filled shape and another image for the stroke. In the main loop I can set the proper color, blend and alpha before drawing each image. Is this clever or overdone?

* If I want to change the shape I need to create the cairo image and load it into a TImage every frame. Or can I clear the existing TCairo instance (to a transparent layer)? Or...?

I included an example of the two-images-per-shape method:

rem
This program creates rounded rectangles.
It devides the fill from the stroke in two images. 
These images can be drawn with corresponding color, blend and alpha 
without recreating the cairo shape every frame.
end rem
SuperStrict

Import bah.Cairo
'Import kistjes.modelshop

SeedRnd(MilliSecs())


Graphics 800, 600, 0


Local oList:TList = CreateList()
For Local i:Int = 1 To 20
	oList.AddLast(TRoundedRect.Create(400, 300, Rnd(50, 120), 20))
Next

SetBlend ALPHABLEND

SetClsColor(255, 255, 255)

Repeat
	Cls
	SetRotation(GetRotation() + 0.1)
	
	For Local oRect:TRoundedRect = EachIn oList
		oRect.Update()
		oRect.Draw()
	Next

	Flip
Until KeyHit(KEY_ESCAPE)

End


Type TRoundedRect
	Field poFillImage:TImage
	Field poStrokeImage:TImage
	
	Field pfX:Float, pfY:Float
	Field pfWidth:Float, pfHeight:Float, pfRadius:Float, pfStrokeWidth:Float

'	Field poFillColor:TmsColor
'	Field poStrokeColor:TmsColor
	Field piHue:Int
	
	Function Create:TRoundedRect(fWidth:Float, fHeight:Float, fRadius:Float, fStrokeWidth:Float)
		Local o:TRoundedRect = New TRoundedRect
		o.poFillImage = CreateImage(fWidth, fHeight, 1, DYNAMICIMAGE | MASKEDIMAGE | FILTEREDIMAGE)
		o.poStrokeImage = CreateImage(fWidth, fHeight, 1, DYNAMICIMAGE | MASKEDIMAGE | FILTEREDIMAGE)
		o.pfWidth = fWidth
		o.pfHeight = fHeight
		o.pfRadius = fRadius
		o.pfStrokeWidth = fStrokeWidth
		o.pfX = Rnd(0, GraphicsWidth())
		o.pfY = Rnd(0, GraphicsHeight())
		o.CreateImages()

		o.piHue:Int = Rand(360)
'		o.poFillColor = ColorHSV(o.piHue, 20, 100)
'		o.poStrokeColor = ColorHSV(o.piHue, 50, 60)
		
		Return o
	End Function
	
	Method CreateImages()
	
		'first create the fill image
		Local poCairo:TCairo = TCairo.Create(TCairoImageSurface.CreateForPixmap(pfWidth, pfHeight))
		Local ux:Double = 1, uy:Double = 1
		poCairo.DeviceToUser(ux, uy)

		Local fhw:Float = pfStrokeWidth / 2
		
		poCairo.MoveTo(pfWidth - (fhw + pfRadius), fhw)
		poCairo.Arc(pfWidth - (fhw + pfRadius), fhw + pfRadius, pfRadius, 270, 360)
		poCairo.LineTo(pfWidth - fhw, pfHeight - (fhw + pfRadius))
		poCairo.ArcNegative(pfWidth - fhw, pfHeight - fhw, pfRadius, 270, 180)
		poCairo.LineTo(fhw + pfRadius, pfHeight - fhw)
		poCairo.Arc(fhw + pfRadius, pfHeight - (fhw + pfRadius), pfRadius, 90, 180)
		poCairo.LineTo(fhw, fhw + pfRadius)
		poCairo.ArcNegative(fhw, fhw, pfRadius, 90, 0)
		poCairo.ClosePath()
		
		'setting color to pure white & alpha 1, allows to set the required color/alpha combi at Draw time.
		poCairo.SetSourceRGBA(1, 1, 1, 1)
		poCairo.FillPreserve()
		poFillImage = LoadImage(TCairoImageSurface(poCairo.GetTarget()).Pixmap(), MASKEDIMAGE | FILTEREDIMAGE)
		MidHandleImage(poFillImage)

		poCairo.Destroy()

		'now create the stroke image
		poCairo = TCairo.Create(TCairoImageSurface.CreateForPixmap(pfWidth, pfHeight))
		poCairo.DeviceToUser(ux, uy)
		
		
		poCairo.MoveTo(pfWidth - (fhw + pfRadius), fhw)
		poCairo.Arc(pfWidth - (fhw + pfRadius), fhw + pfRadius, pfRadius, 270, 360)
		poCairo.LineTo(pfWidth - fhw, pfHeight - (fhw + pfRadius))
		poCairo.ArcNegative(pfWidth - fhw, pfHeight - fhw, pfRadius, 270, 180)
		poCairo.LineTo(fhw + pfRadius, pfHeight - fhw)
		poCairo.Arc(fhw + pfRadius, pfHeight - (fhw + pfRadius), pfRadius, 90, 180)
		poCairo.LineTo(fhw, fhw + pfRadius)
		poCairo.ArcNegative(fhw, fhw, pfRadius, 90, 0)
		poCairo.ClosePath()
				
		poCairo.SetLineWidth(pfStrokeWidth)
		poCairo.SetLineCap(CAIRO_LINE_CAP_ROUND)
		poCairo.SetLineJoin(CAIRO_LINE_JOIN_ROUND)
		Local d:Double = pfStrokeWidth
'		poCairo.SetDash([0:Double, d*1.5])
		
		'setting color to pure white & alpha 1, allows to set the required color/alpha combi at Draw time.
		poCairo.SetSourceRGBA(1, 1, 1, 1)
		poCairo.Stroke()
		poStrokeImage = LoadImage(TCairoImageSurface(poCairo.GetTarget()).Pixmap(), MASKEDIMAGE | FILTEREDIMAGE)
		MidHandleImage(poStrokeImage)

		poCairo.Destroy()
	End Method
	
	Method Update()
		piHue = (piHue + 1) Mod 360
'		poFillColor.SetH(piHue)
'		poStrokeColor.SetH(piHue)
	End Method
	
	Method Draw()
		SetAlpha(0.5)
		'poFillColor.SetThisColor()
		
		SetColor((Sin(piHue) + 1) * 127, 240, 200)
		DrawImage(poFillImage, pfx, pfy)
		SetAlpha(1)
		'poStrokeColor.SetThisColor()
		SetColor((Sin(piHue) + 1) * 127, 120, 100)
		DrawImage(poStrokeImage, pfX, pfY)
	End Method
	
End Type

Brucey

(Posted 2009) [#2]

Very nice demo :-)

I suppose the biggest issue you might have with Cairo, is that it is not really designed for realtime drawing. Although it has improved significantly since I first wrapped it. (I think this comes from its integration into GTK and Mozilla)
Also, a native OpenGL backend is not currently feasible - if it were, I would definitely have that as an option!

for 1, I think, if you are not intending on changing the shape too often, it's a reasonably good way to cache it. Certainly much faster than recreating it. But, if you need to scale UP, you would get some artifacting. (scaling down of course wouldn't have that problem).

Not too sure about your second question.
You might get away with calling Save(), drawing all your stuff, taking a snapshot of it, then calling Restore() when you want to reset it back to its state before.
Save() and Restore() can be very useful tools - for temporary setting of colours/cap/join etc.

Kistjes

(Posted 2009) [#3]

Thank you for the clear answer. I was afraid you're going to say something like this.
I'll keep Cairo in mind for some impressive, but static, vector drawing ;)

Brucey

(Posted 2009) [#4]

Well, it's much faster than it used to be, and you can certainly do some useful things with it.

I suppose it depends how much you want to do with it - realtime.
Driving a whole interface is possible not cpu-effective. But I can see a case where it might fit in to do a little rendering where required.
The "slow" part of the process is obviously having to do everything directly on the pixmap data - and then having to copy that data back into VRAM. But if you keep things reasonable it can work.

One other nice thing (if you are into that) is that you can change the "backend" and have it render the using the same code, to a PDF, for example.

Anyhoo :-)