Clipping draw ops to a rounded rectangle

BlitzMax Forums/BlitzMax Programming/Clipping draw ops to a rounded rectangle

GfK(Posted 2013) [#1]
Is this even possible?

I want to have a rectangle, with rounded corners. Inside that box I want to draw some text plus a bunch of images. I can't just use SetViewport() for this, because of the rounded corners.

Any ideas?


Derron(Posted 2013) [#2]
Has it to be "realtime" ?

What about using some kind "clipping image" ?

So you have to render all your text/images into a new pixmap. Afterwards you delete the outside/unwanted parts using a clipping image (opaque pixel = delete, keep rest).

Else I don't know a available command/method for this style of clipping.


EDIT: You can even do it way around: grab the background (if mostly static), remove the covered area - and then just draw this "clipping mask" on top of the text/images.


bye
Ron


Brucey(Posted 2013) [#3]
You can do it with Cairo - just saying, that's all :-)


AdamStrange(Posted 2013) [#4]
you want it just a line or filled?


Who was John Galt?(Posted 2013) [#5]
Yup- easiest way (bar external tools) is to combine a clipping rectangle with an image of the four rounded corners that you overlay each frame.


AdamStrange(Posted 2013) [#6]
Here's the base code for rounded filled rectangle :)

Function MRoundRect(nX:Int, nY:Int, nWidth:Int, nHeight:Int, nR1:Int, nR2:Int, nR3:Int, nR4:Int)
	Local i:Int

	Local nX1:Int = nX + nWidth
	Local nY1:Int = nY + nHeight
	
	glDisable(GL_TEXTURE_2D)
'	glEnable(GL_POLYGON_SMOOTH)
	glBegin(GL_POLYGON)
'		Print g_bRed+" "+g_bGreen+" "+g_bBlue+" "+g_bAlpha
		
		glcolor4ub(g_bRed, g_bGreen, g_bBlue, g_bAlpha)

		glVertex2i(nX1 - nR2, nY + nR2)
		For i = 270 To 360 Step 30
			glVertex2f(nX1 - nR2 + (Cos(i) * nR2), nY + nR2 + (Sin(i) * nR2))
		Next	

		glcolor4ub(g_bRed2, g_bGreen2, g_bBlue2, g_bAlpha2)
		
		glVertex2i(nX1, nY1 - nR3)
		For i = 0 To 90 Step 30
			glVertex2f(nX1 - nR3 + (Cos(i) * nR3), nY1 - nR3 + (Sin(i) * nR3))
		Next	

		glVertex2i(nX + nR4, nY1)
		For i = 90 To 180 Step 30
			glVertex2f(nX + nR4 + (Cos(i) * nR4), nY1 - nR4 + (Sin(i) * nR4))
		Next	

		glcolor4ub(g_bRed, g_bGreen, g_bBlue, g_bAlpha)

		glVertex2i(nX, nY + nR1)
		For i = 180 To 270 Step 30
			glVertex2f(nX + nR1 + (Cos(i) * nR1), nY + nR1 + (Sin(i) * nR1))
		Next	

		glVertex2i(nX1 - nR2, nY)

	glEnd()
'	glDisable(GL_POLYGON_SMOOTH)
	glEnable(GL_TEXTURE_2D)
End Function



GfK(Posted 2013) [#7]
What I have is my game map drawn first. Then on top of that, a rounded rectangle of some sort - within that rectangle I'll draw a background image (for the whole of the rectangle), then some character images and text on top.

I'm sure Cairo is great, but I had a look and my sieve-like brain could not make head nor tail of it.

For the sake of simplicity, processing time and development timescales, I'll need to have a rethink on this one...

[edit]

@AdamStrange - thanks, but I'm using DX9.


Yan(Posted 2013) [#8]
Stencil buffer?


GfK(Posted 2013) [#9]
Stencil buffer?

Que?


Yan(Posted 2013) [#10]
TBH, I'm not much wiser than yourself on the subject but I do vaguely recall someone patching D3D9Max2D to allow stencil buffer usage.

Here's what MSDN has to say on the subject of stencil buffers...

http://msdn.microsoft.com/en-us/library/windows/desktop/bb206123%28v=vs.85%29.aspx


Kryzon(Posted 2013) [#11]
You can draw images as "shapes" on the stencil buffer to set up a mask, and then by means of using the stencil 'function,' you can draw images and text only in the masked or unmasked regions.

The stencil buffer is the base for many visual effects.
Mirrors, shadows, transition effects etc.

Before using it with Max2D, you need to create a graphics context that has the flag GRAPHICS_STENCILBUFFER.

A BlitzMax forum search for 'stencil' yields:
- http://www.blitzforum.de/forum/viewtopic.php?t=33741 (This one should be useful.)
- http://blitzbasic.com/Community/posts.php?topic=88639
- http://blitzbasic.com/Community/posts.php?topic=96795