[Help]Rounded rectangle

[3B00DG4MER]

Hello,Today i have made a NEWS System

is it possible to make the rectangle rounded like this ?

[Karuzo]

Just use a picture and that's it ^^

[3B00DG4MER]

Just use a picture and that's it ^^

You mean can't make it rounded ?

[Karuzo]

I don't think so.

[3B00DG4MER]

I don't think so.

Thanks

[tosfera]

I don't think so.

Thanks

There is a way, 'chatbubbles' ( the resource ) used this way. It's an insane way. They created a rectangle that kept growing 1px bigger in the width and moving 1px down to finally create the rounded rectangle. I wouldn't recommend it, but it's a way.

[Gallardo9944]

you actually can create multiple rectangles with "for" vertically by 1 pixel and change the size as it goes. Like this

local x,y = guiGetScreenSize() 
local sx,sy = 400,200 
local size = 45 -- pixel size to cut 
  
function performRendering() 
  for i=1,sy do 
    local dg = math.min(i,size) -- limit it to the size 
    if i > sy-size then 
      dg = sy-math.max(sy-size,i) -- limit it to the size for bottom parts 
    end 
    local csx = sx-1/dg*size -- use our lovely y = k/x function 
    dxDrawRectangle(x/2-csx/2,y/2-sy/2+i,csx,1,tocolor(0,0,0,200)) -- draw the magic at the middle 
  end 
end 
addEventHandler("onClientRender",getRootElement(),performRendering) 

But it WILL loose the quallity and it WILL look a bit weird.

You also can draw that more frequently than 1 pixel, but keep in mind that slow computers will degrade on performance.

[Castillo]

I don't see what's the point of that, what's wrong with using a image?

[3B00DG4MER]

I don't see what's the point of that, what's wrong with using a image?

it's take download

[tosfera]

I don't see what's the point of that, what's wrong with using a image?

it's take download

An image like this wont take more than 100kb, maybe even less if it's small. If you don't want to take the download part. Don't make these rounding corners.

[3B00DG4MER]

you actually can create multiple rectangles with "for" vertically by 1 pixel and change the size as it goes. Like this

local x,y = guiGetScreenSize() 
local sx,sy = 400,200 
local size = 45 -- pixel size to cut 
  
function performRendering() 
  for i=1,sy do 
    local dg = math.min(i,size) -- limit it to the size 
    if i > sy-size then 
      dg = sy-math.max(sy-size,i) -- limit it to the size for bottom parts 
    end 
    local csx = sx-1/dg*size -- use our lovely y = k/x function 
    dxDrawRectangle(x/2-csx/2,y/2-sy/2+i,csx,1,tocolor(0,0,0,200)) -- draw the magic at the middle 
  end 
end 
addEventHandler("onClientRender",getRootElement(),performRendering) 

But it WILL loose the quallity and it WILL look a bit weird.

You also can draw that more frequently than 1 pixel, but keep in mind that slow computers will degrade on performance.

Thanks

[3B00DG4MER]

I don't see what's the point of that, what's wrong with using a image?

it's take download

An image like this wont take more than 100kb, maybe even less if it's small. If you don't want to take the download part. Don't make these rounding corners.

Okay okay i'll make a image

[arezu]

If you want to make the rounded rectangle scalable, then it's better if you just make an image of the corner and draw everything else with dxDrawRectangle, then the download should be less than 1kb (more in photoshop, because of useless photoshop info in the image)

[Dealman]

They would have to download the image once, and then that's all it renders.

It is way more efficient than doing those calculations with every frame. And easier. And looks better.

[IIYAMA]

Well all you need is white 4 corners.... (white because then you can set up your own colour)

Perfect rounded corners, it only cost a lot loop power to generate it. (one time of course)

See

See why the corners must be white

[IIYAMA]

3B00DG4MER: thank you .

Solved.

[raynner]

function roundedRectangle(x, y, w, h, borderColor, bgColor, postGUI)
	if (x and y and w and h) then
		if (not borderColor) then
			borderColor = tocolor(0, 0, 0, 200);
		end
		
		if (not bgColor) then
			bgColor = borderColor;
		end
		
		--> Background
		dxDrawRectangle(x, y, w, h, bgColor, postGUI);
		
		--> Border
		dxDrawRectangle(x + 2, y - 1, w - 4, 1, borderColor, postGUI); -- top
		dxDrawRectangle(x + 2, y + h, w - 4, 1, borderColor, postGUI); -- bottom
		dxDrawRectangle(x - 1, y + 2, 1, h - 4, borderColor, postGUI); -- left
		dxDrawRectangle(x + w, y + 2, 1, h - 4, borderColor, postGUI); -- right
	end
end

Just add it inside your rendering function next to the rectangle you want it to become round..

[NeXuS™]

@raynner, this is already a solved post, and was created back in April...

[MisterQuestions]

Just as a simple solution, having a circle image and drawing sections for corners its better, simple and has a better performance than using maths everyframe.