dxDrawRounded using Images

[FlyingSpoon]

function drawRoundedRectangle ( x, y, w, h )
    -- draw image
end

Curious if I'm able to make a function like this, and resize the image without blurring it out. Resizing both the width and height.

For example, using this image -

[IIYAMA]

See example on this page:

https://wiki.multitheftauto.com/wiki/DxDrawCircle

 

(not sure if it works as you want it)

Edited April 15, 2019 by IIYAMA

[FlyingSpoon]

Just now, IIYAMA said:

See example on this page:

https://wiki.multitheftauto.com/wiki/DxDrawCircle

 

 

Already did, problem with that is that it's not really smooth on the edges, you see it breaking. What do you recommend?

[IIYAMA]

Hmm, you could try to generate it with a browser.

 

> browser

https://wiki.multitheftauto.com/wiki/CreateBrowser

 

> html + css

<section style="width:300px;height:100;background-color:white;border-radius: 25px;"></section>

 

> get

https://wiki.multitheftauto.com/wiki/DxGetTexturePixels

https://wiki.multitheftauto.com/wiki/DxGetPixelsSize

 

> set

https://wiki.multitheftauto.com/wiki/DxCreateTexture

https://wiki.multitheftauto.com/wiki/DxSetTexturePixels

 

(or just generate the corners, color = white = #fff is recommended)

Edited April 15, 2019 by IIYAMA

[FlyingSpoon]

Just now, IIYAMA said:

Hmm, you could try to generate it with a browser.

 

> browser

https://wiki.multitheftauto.com/wiki/CreateBrowser

 

> html + css

<section style="width:300px;height:100;background-color:black;border-radius: 25px;"></section>

 

> get

https://wiki.multitheftauto.com/wiki/DxGetTexturePixels

https://wiki.multitheftauto.com/wiki/DxGetPixelsSize

 

> set

https://wiki.multitheftauto.com/wiki/DxCreateTexture

https://wiki.multitheftauto.com/wiki/DxSetTexturePixels

 

 

Yeah I know its possible with CEF, but I want to avoid that. Trying to do it through Dx, I've seen people do something with dxDrawImageSection, any idea on that?

[IIYAMA]

3 minutes ago, ℓιgнт said:

Yeah I know its possible with CEF, but I want to avoid that. Trying to do it through Dx, I've seen people do something with dxDrawImageSection, any idea on that?

This function can be used to repeat the same image, it might be possible that they use the rotation/rotationCenterOffsetX/rotationCenterOffsetY property for each new repeated image as offset.

But I have never seen anybody do that. So that is UNKNOWN territory for me.

[WASSIm.]

Look at example: https://wiki.multitheftauto.com/wiki/DxDrawCircle

function dxDrawRoundedRectangle(x, y, rx, ry, color, radius)
    rx = rx - radius * 2
    ry = ry - radius * 2
    x = x + radius
    y = y + radius

    if (rx >= 0) and (ry >= 0) then
        dxDrawRectangle(x, y, rx, ry, color)
        dxDrawRectangle(x, y - radius, rx, radius, color)
        dxDrawRectangle(x, y + ry, rx, radius, color)
        dxDrawRectangle(x - radius, y, radius, ry, color)
        dxDrawRectangle(x + rx, y, radius, ry, color)

        dxDrawCircle(x, y, radius, 180, 270, color, color, 7)
        dxDrawCircle(x + rx, y, radius, 270, 360, color, color, 7)
        dxDrawCircle(x + rx, y + ry, radius, 0, 90, color, color, 7)
        dxDrawCircle(x, y + ry, radius, 90, 180, color, color, 7)
    end
end
dxDrawRoundedRectangle(350, 50, 100, 100, tocolor(0, 255, 0, 255), 20)

[DNL291]

Using border icon + dxDrawImageSection:

https://www.dropbox.com/s/btuaj3u8ovszqd1/rounded_rectangle.zip?dl=0

[thisdp]

idk whether this could help you or not.

https://wiki.multitheftauto.com/wiki/DgsCreateRoundRect

[FlyingSpoon]

7 hours ago, thisdp said:

idk whether this could help you or not.

https://wiki.multitheftauto.com/wiki/DgsCreateRoundRect

I tried DGS, it's still not as smooth as I want it to be, you can see the rough edges. It's a good try though, thanks.

14 hours ago, DNL291 said:

Using border icon + dxDrawImageSection:

https://www.dropbox.com/s/btuaj3u8ovszqd1/rounded_rectangle.zip?dl=0

Perfect that's what I needed.

[thisdp]

1 minute ago, ℓιgнт said:

I tried DGS, it's still not as smooth as I want it to be, you can see the rough edges. It's a good try though, thanks.

Perfect that's what I needed.

the rough edges is adjustable, you can make it smooth just by changing the settings. Actually the edge is smooth by default

Edited April 16, 2019 by thisdp

[FlyingSpoon]

Just now, thisdp said:

the rough edges is adjustable, you can make it smooth just by changing the settings

I've tried it, you can still see the imperfection. Plus I think it might be better to use images since there's less rendering to do.