RoundRect - Pyöreäreunainen suorakulmio

Oletko tehnyt jotain, mistä muut voisivat hyötyä. Postita vinkit tänne.
Post Reply
User avatar
Koodiapina
Forum Veteran
Posts: 2396
Joined: Tue Aug 28, 2007 4:20 pm
Contact:

RoundRect - Pyöreäreunainen suorakulmio

Post by Koodiapina » Mon Jan 14, 2008 6:21 pm

Tällä yksinkertaisella funktiolla voit piirtää pyöreäkulmaisen suorakulmion nykyisellä piirtovärillä. Hyöty on luultavasti GUI:n luonnissa. Huomaa, että pienen pyörsuorkulm. piirtäminen ei onnistu kunnolla, jos pyöreys on asetettu liian suureksi. Funktioon ei ole lisätty sen automaattista määrittämistä koon mukaan, koska se on melko turha, ja käyttäjän tulisi itse saada päättää.

X, Y ovat koordinaatteja
W on leveys
H on korkeus
S on kulmien pyöreys

...Ja itse koodi esimerkin kanssa:

Code: Select all

    Repeat
        RoundRect(50,50,200,150,20)
        DrawScreen
    Forever
    
    Function RoundRect(x,y,w,h,s = 5)
        Box x+s,y,w-(s*2),h
        Box x,y+s,w,h-(s*2)
        Circle x,y,s*2
        Circle x+w-s*2,y,s*2
        Circle x+w-s*2,y+h-s*2,s*2
        Circle x,y+h-s*2,s*2
    EndFunction 
Last edited by Koodiapina on Mon Jan 14, 2008 7:25 pm, edited 1 time in total.
Olen liian älykäs ollakseni väärässä. Jos olet kanssani eri mieltä, suosittelen sinua pohtimaan omaa elämänkatsomustasi ja sen perusteita.

User avatar
Harakka
Advanced Member
Posts: 430
Joined: Mon Aug 27, 2007 9:08 pm
Location: Salo
Contact:

Re: RoundRent - Pyöreäreunainen suorakulmio

Post by Harakka » Mon Jan 14, 2008 7:14 pm

Ihan hienolta vaikuttaa, mutta mitä rent tarkoittaa funktion nimessä? :P Rectangle = suorakulmio englanniksi, siitä tulee kyllä lyhenne rect.
Peli piirtokomennoilla - voittaja, Virtuaalilemmikkipeli - voittaja,
Sukellusvenepeli - voittaja, Paras tileset - voittaja
Vaihtuva päähenkilö - voittaja, Autopeli - voittaja sekä
Hiirellä ohjattava peli - voittaja B)

User avatar
Koodiapina
Forum Veteran
Posts: 2396
Joined: Tue Aug 28, 2007 4:20 pm
Contact:

Re: RoundRent - Pyöreäreunainen suorakulmio

Post by Koodiapina » Mon Jan 14, 2008 7:24 pm

Harakka wrote:Rectangle = suorakulmio englanniksi, siitä tulee kyllä lyhenne rect.
Okei, vaihan.
Olen liian älykäs ollakseni väärässä. Jos olet kanssani eri mieltä, suosittelen sinua pohtimaan omaa elämänkatsomustasi ja sen perusteita.

User avatar
Kassu
Newcomer
Posts: 22
Joined: Wed Aug 29, 2007 5:32 pm

Re: RoundRect - Pyöreäreunainen suorakulmio

Post by Kassu » Thu Jan 17, 2008 5:51 pm

Itse olen tehnyt funktion joka piirtää pyöristetyn suorakulmion liukuvärinä(ylhäältä alas). Funktiossa voi myöskin määrittää sekä x- että y-pyöreyden. Funktiolla saa tehtyä hyvin näyttäviä nappuloita. Nappiesimerkkiä voi käydä katsomassa keskeneräisistä/jäätyneistä projekteista (CSS exe ja kuva). Yritän lisätä esimerkin napin kanssa kunhan pääsen koneelle. Nyt iPodilla :)

Ihan kätevä funktio varsinkin GUIn kanssa niinkuin sanoit.

User avatar
otto90x
Advanced Member
Posts: 349
Joined: Mon Aug 27, 2007 9:00 pm
Location: Lapinjärvi, Finland
Contact:

Re: RoundRect - Pyöreäreunainen suorakulmio

Post by otto90x » Thu Jan 17, 2008 9:16 pm

Korjasin tuon ylipyöristys "ongelman".

Code: Select all

    Repeat
        RoundRect(50,50,200,20,50)
        DrawScreen
    Forever
   
    Function RoundRect(x,y,w,h,s = 5)
        ss=s*2
        ss=Min(min(h,w),ss)
        s=ss/2
        Box x+s,y,w-(s*2),h
        Box x,y+s,w,h-(s*2)
        Circle x,y,s*2
        Circle x+w-s*2,y,s*2
        Circle x+w-s*2,y+h-s*2,s*2
        Circle x,y+h-s*2,s*2
    EndFunction
Otto Martikainen a.k.a. MetalRain, otto90x, kAATOSade.
Runoblogi, vuodatusta ja sekoiluja.

User avatar
MaGetzUb
Guru
Posts: 1715
Joined: Sun Sep 09, 2007 12:35 pm
Location: Alavus

Re: RoundRect - Pyöreäreunainen suorakulmio

Post by MaGetzUb » Fri Jan 18, 2008 12:25 am

Täytyy sanoa, että on aika kätsy.
Kassu wrote:Itse olen tehnyt funktion joka piirtää pyöristetyn suorakulmion liukuvärinä(ylhäältä alas). Funktiossa voi myöskin määrittää sekä x- että y-pyöreyden. Funktiolla saa tehtyä hyvin näyttäviä nappuloita. Nappiesimerkkiä voi käydä katsomassa keskeneräisistä/jäätyneistä projekteista (CSS exe ja kuva). Yritän lisätä esimerkin napin kanssa kunhan pääsen koneelle. Nyt iPodilla :)

Ihan kätevä funktio varsinkin GUIn kanssa niinkuin sanoit.
P*** vie, kun coolbasicissa olisi nopeampi alpha blendaus, niin toi sinun selittämä funktio olisi todella hieno. :P
Solar Eclipse
Meneillä olevat Projektit:
We're in a simulation, and God is trying to debug us.

User avatar
koodaaja
Moderator
Moderator
Posts: 1583
Joined: Mon Aug 27, 2007 11:24 pm
Location: Otaniemi - Mikkeli -pendelöinti

Re: RoundRect - Pyöreäreunainen suorakulmio

Post by koodaaja » Fri Jan 18, 2008 4:12 pm

Eihän alpha blendaus tähän liity, sehän vaikuttaa vain läpinäkyviin esineisiin. Tämä on ihan normiblendausta. Ja jos tekee linellä liukuvärjäyksen, niin hyvinhän se toimii. Pyöristyksiin vain vähän matikkaa.

User avatar
Kassu
Newcomer
Posts: 22
Joined: Wed Aug 29, 2007 5:32 pm

Re: RoundRect - Pyöreäreunainen suorakulmio

Post by Kassu » Fri Jan 18, 2008 5:00 pm

programmer of DSG wrote:P*** vie, kun coolbasicissa olisi nopeampi alpha blendaus, niin toi sinun selittämä funktio olisi todella hieno. :P
Niinkuin koodaaja sanoi ei siihen muuta kun hieman matikkaa tarvita.

Tässä olisi pieni esimerkki funktioni käytöstä. Kyseessä on sama nappifunktio josta aikaisemmin kerroin.
Funktiolla saa helposti tehtyä hienoa grafiikkaa livenä, tosin siitä tulee helposti liian raskas varsinkin läppäreille. Funktiota ei siis sovi käyttää itse pelissä, ainakaan liikaa, mutta se sopii hyvin esimerkiksi valikkoihin. Molempia funktioita saa käyttää vapaasti. En ole ainakaan vielä kommentoinut koodia. Pyytäkää jos haluatte.

Code: Select all

ClsColor 0,0,255

Repeat
    TextButton(10,10,"Nappi",100,40)
    DrawScreen
Forever

Function TextButton(x,y,text1$,x1=0,y1=0,P=1)

    r=getRGB(RED)
    g=getRGB(GREEN)
    b=getRGB(BLUE)

    If P=0 Then
        r=128
        g=128
        b=128
    EndIf

    If x1=0 Then x1=TextWidth(text1$)+10
    If y1=0 Then y1=TextHeight(text1$)+8

    If x1<TextWidth(text1$)+2 Then x1=TextWidth(text1$)+2
    If y1<TextHeight(text1$)+2 Then y1=TextHeight(text1$)+2
    
    If x1<10 Then x1=10
    If y1<10 Then y1=10

    If MouseX()>x And MouseX()<x+x1
        If MouseY()>y And MouseY()<y+y1 Then MO=ON
        If MO And MouseDown(1) Then MD=ON
    EndIf

    PickColor x,y
    Color MakeUsable(getRGB(RED)-100,0,255),MakeUsable(getRGB(GREEN)-100,0,255),MakeUsable(getRGB(BLUE)-100,0,255)    
    GradientRoundedBox (x,y,x1,y1,5,5,MakeUsable(getRGB(RED)+200,0,255),MakeUsable(getRGB(GREEN)+200,0,255),MakeUsable(getRGB(BLUE)+200,0,255))

    If Not MD
        Color 100+50*MO,100+50*MO,255
        GradientRoundedBox (x+3,y+3,x1-6,y1-6,5,5,50*MO,50*MO,100+50*MO)
    Else
        Color 50,50,100
        GradientRoundedBox (x+3,y+3,x1-6,y1-6,5,5,150,150,255)
    EndIf

    Color r,g,b

    CenterText x+x1/2+MD*2,y+y1/2+MD*2,text1$,2

    If MO And MouseUp(1) Then
        If P=1 Then Return ON
    EndIf

EndFunction

Function GradientRoundedBox(x,y,x1,y1,xr=5,yr=5,r2=255,g2=255,b2=255)
    
    r1=getRGB(RED)
    g1=getRGB(GREEN)
    b1=getRGB(BLUE)
    
    If xr>x1/2 Then xr=x1/2
    If yr>y1/2 Then yr=y1/2
    
    If xr<1 Then xr=1
    If yr<1 Then yr=1
    
    For i=0 To y1
        Color r1*(y1-i)/y1+r2*i/y1,g1*(y1-i)/y1+g2*i/y1,b1*(y1-i)/y1+b2*i/y1
        If i<yr Or i>y1-yr Then
            If i<yr Then
                ang=ASin(Float(yr-i)/Float(yr))
                Box x+xr-Cos(ang)*xr,y+i,Int(Cos(ang)*xr)*2+x1-xr*2,1
            Else
                ang=ASin(Float(yr-y1+i)/Float(yr))
                Box x+xr-Cos(ang)*xr,y+i,Int(Cos(ang)*xr)*2+x1-xr*2,1
            EndIf
        Else
            Box x,y+i,x1,1
        EndIf
    Next i
    
    Color r1,g1,b1

EndFunction

Function MakeUsable(Number#,Mini#=0,Maxi#=100)
    
    If Number#<mini# Then number#=mini#
    If number#>maxi# Then number#=maxi#
    
    Return number#
    
EndFunction 


Kun käytätte GradientRoundedBoxia asettakaa ensin piirtoväri, jolla aloitaa, ja sitten funktion loppuosaan (r2,g2,b2) toinen väri.
xr=xPyöreys (koikeilkaa vaikka MouseX():ella)
yr=yPyöreys

TextButton
x=xKord. vasen laita
y=yKord. ylälaita
P=Possible/Mahdollinen, jos nolla niin nappia ei pysty painamaan
EDIT:

Sorg. korjattu
kokosin koodin nopeasti enkä testannut, toivottavasti nyt toimii :D

Last edited by Kassu on Fri Jan 18, 2008 5:17 pm, edited 1 time in total.

User avatar
Koodiapina
Forum Veteran
Posts: 2396
Joined: Tue Aug 28, 2007 4:20 pm
Contact:

Re: RoundRect - Pyöreäreunainen suorakulmio

Post by Koodiapina » Fri Jan 18, 2008 5:07 pm

Näyttää hienolta, mutta toimii todella hitaasti kuten mainitsit. FPS oli mulla siinä 3:n tienoilla yhden nappulan kanssa. En usko, että tuolla valikkoa kannattaa tehdä, ellei omista supertietokonetta ;)
EDIT:

Saiskohan tota nopeutettua silleen, että piirtäis noi väriliut kuvaan? Silloin niitä ei tarvisi tehdä joka kerta luupissa.

Olen liian älykäs ollakseni väärässä. Jos olet kanssani eri mieltä, suosittelen sinua pohtimaan omaa elämänkatsomustasi ja sen perusteita.

User avatar
Kassu
Newcomer
Posts: 22
Joined: Wed Aug 29, 2007 5:32 pm

Re: RoundRect - Pyöreäreunainen suorakulmio

Post by Kassu » Fri Jan 18, 2008 6:36 pm

Grandi wrote:Näyttää hienolta, mutta toimii todella hitaasti kuten mainitsit. FPS oli mulla siinä 3:n tienoilla yhden nappulan kanssa. En usko, että tuolla valikkoa kannattaa tehdä, ellei omista supertietokonetta ;)
EDIT:

Saiskohan tota nopeutettua silleen, että piirtäis noi väriliut kuvaan? Silloin niitä ei tarvisi tehdä joka kerta luupissa.

Minulla ainakin toimii tuo yksi nappi ihan täydellä FPS:ällä(60) eikä minun läppäri mikän supertietokone ole. Kokeile sulkemalla kaikki ylimääräiset ohjelmat. Minulla toimii ihan sulavasti yli yhdeksänkin nappia samanaikaisesti.

Kyllähän niin voisi tehdä että piirtää ensin kuvaan jossa on väriliuku tai jotain muuta jota aikoo käyttää, jonka jälkeen DrawImageBoxilla ja matematiikalla tehdään "maski".
kuten aikaisemmin sanoin niin funktioita saa käyttää vapaasti, joten ei muuta kuin muokkaamaan. Jos haluat voin liittää koodin jossa "slimelle" piirretään "pelipaita" pienenä esimerkkinä.

User avatar
MaGetzUb
Guru
Posts: 1715
Joined: Sun Sep 09, 2007 12:35 pm
Location: Alavus

Re: RoundRect - Pyöreäreunainen suorakulmio

Post by MaGetzUb » Fri Jan 18, 2008 8:04 pm

koodaaja wrote:Eihän alpha blendaus tähän liity, sehän vaikuttaa vain läpinäkyviin esineisiin. Tämä on ihan normiblendausta. Ja jos tekee linellä liukuvärjäyksen, niin hyvinhän se toimii. Pyöristyksiin vain vähän matikkaa.
Ei, ei, ei, ei, eijei, ei!! Vaan tarkoitin, että se nappi alphablendattais, nii taustaa näkyisi sieltä takaa tummana. ;)
Solar Eclipse
Meneillä olevat Projektit:
We're in a simulation, and God is trying to debug us.

Post Reply