Hi, how can I draw a rect with round corners? Thanks, Pedro
@pvchagas On the right side of the page, just above “Start a New Discussion” is a search bar. You can use that to do a search for round rectangles or anything else. There are a lot of examples in this forum, you just need to search for things.
Thanks for your reply. I had searched, but I only found pre-2.0 threads, so I was wondering if this feature had been added recently.
Why not making a new contest ‘smallest code rounded rect’? That would be fun! I’ll post my entry below.
here it is (22 single-command lines inside the function)
-- rounded rect
function roundedRect(x,y,w,h,r)
local oldFill = color( fill() )
local oldStroke = color( stroke() )
local s = strokeWidth()
local ds = math.max(s-1,0)
local function rawRect(x,y,w,h,r)
translate(x,y)
rect(r,0,w-2*r,h)
rect(0,r,w,h-2*r)
ellipse(r ,r,r*2)
ellipse(w-r,r,r*2)
ellipse(r ,h-r,r*2)
ellipse(w-r,h-r,r*2)
translate(-x,-y)
end
noStroke()
fill(oldStroke)
rawRect(x,y,w,h,r)
fill(oldFill)
rawRect(x+ds, y+ds, w-ds*2, h-ds*2, r-ds)
strokeWidth(s)
stroke(oldStroke)
fill(oldFill)
end
function setup()
end
function draw()
background(40, 40, 50)
strokeWidth(5)
stroke(255, 174, 0, 255)
fill(255, 0, 0, 255)
roundedRect(100,200,200,100,20)
rect(400,200,200,100)
end
[edit] had to make a couple changes for 100% compatibility with strokeWidth
here i have gained 1 line (21 now).
[edit] argh! back to 22: i must put a resetStyle for 100% compatibility.
[edit] damned! Doesnt work correctly with transparent colors.
-- rounded rect
function roundedRect(x,y,w,h,r)
local oldFill = color( fill() )
local oldStroke = color( stroke() )
local s = strokeWidth()
local ds = math.max(s-1,0)
local function rawRect(x,y,w,h,r)
translate(x,y)
rect(r,0,w-2*r,h)
rect(0,r,w,h-2*r)
ellipse(r ,r,r*2)
ellipse(w-r,r,r*2)
ellipse(r ,h-r,r*2)
ellipse(w-r,h-r,r*2)
translate(-x,-y)
end
pushStyle()
resetStyle()
noStroke()
fill(oldStroke)
rawRect(x,y,w,h,r)
fill(oldFill)
rawRect(x+ds, y+ds, w-ds*2, h-ds*2, r-ds)
popStyle()
end
function setup()
end
function draw()
background(40, 40, 50)
strokeWidth(5)
--noStroke()
stroke(255, 174, 0, 255)
fill(255, 0, 0, 255)
roundedRect(300,200,200,100,20)
rect(400,200,200,100)
end
i could gain 2 more lines (include the tanslate inside, but would be less readable)
this version is compatible with transparencies, but now it is 50 lines.
-- rounded rect
local function rawRect(img,x,y,w,h,r)
setContext(img)
background(0,0,0,0)
fill(255)
translate(x,y)
rect(r,0,w-2*r,h)
rect(0,r,w,h-2*r)
ellipse(r ,r,r*2)
ellipse(w-r,r,r*2)
ellipse(r ,h-r,r*2)
ellipse(w-r,h-r,r*2)
resetMatrix()
setContext()
end
function roundedRect(x,y,w,h,r)
local oldFill = color( fill() )
local oldStroke = color( stroke() )
local oldTint = color( tint() )
local s = strokeWidth()
local ds = math.max(s-1,0)
local img = image(w,h)
local imgOuter = image(w,h)
local imgInner = image(w,h)
local imgStroke = image(w,h)
pushStyle()
resetStyle()
pushMatrix()
resetMatrix()
spriteMode(CORNER)
noStroke()
rawRect(imgOuter,0,0,w,h,r)
rawRect(imgInner, ds, ds, w-2*ds, h-2*ds, r-ds)
setContext(imgStroke)
sprite(imgOuter,0,0)
blendMode(ZERO, ONE_MINUS_SRC_COLOR)
sprite(imgInner,0,0)
setContext()
blendMode(NORMAL)
setContext(img)
tint(oldStroke)
sprite(imgStroke,0,0)
tint(oldFill)
sprite(imgInner,0,0)
setContext()
popMatrix()
tint( oldTint )
spriteMode( rectMode() )
sprite(img,x,y)
popStyle()
end
function setup()
end
function draw()
background(0, 0, 0, 255)
strokeWidth(5)
--noStroke()
stroke(255, 174, 0, 198)
fill(255, 0, 0, 120)
rect(400,200,200,100)
roundedRect(300,200,200,100,20)
end
I’d just like to put in a quick note: This has been asked 3 times before with amazing answers. Before you ask a question please, please search the forums and try to make your own version first.
@JakAttak - Whoops… Sorry. Missed that.
You can use the class roundRect from the sounds plus example project.
@pvchagas Not sure exactly what you’re after, but here’s an example of rounded rectangles.
supportedOrientations(LANDSCAPE_ANY)
function setup()
parameter.integer("height1",50,350,50,setup1)
parameter.integer("width1",50,300,50,setup1)
parameter.integer("height2",50,350,50,setup1)
parameter.integer("width2",50,300,300,setup1)
end
function setup1()
r1=roundRect(225,400,width1,height1,color(255,0,0))
r2=roundRect(225,25,width2,height2,color(0,255,0))
end
function draw()
background(40, 40, 50)
r1:draw()
r2:draw()
end
roundRect=class()
function roundRect:init(x,y,w,h,c)
self.x=x -- x position
self.y=y -- y position
self.w=w -- width
self.h=h -- height
self.c=c -- color
end
function roundRect:draw()
fill(self.c) -- set color
rect(self.x,self.y,self.w,self.h) -- draw rectangle
ellipse(self.x,self.y+self.h/2,self.h+1) -- draw rounded left end
ellipse(self.x+self.w,self.y+self.h/2,self.h+1) -- draw rounded right end
end