Page 1 of 1

RoundRect - Pyöreäreunainen suorakulmio

Posted: Mon Jan 14, 2008 6:21 pm
by Koodiapina
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 

Re: RoundRent - Pyöreäreunainen suorakulmio

Posted: Mon Jan 14, 2008 7:14 pm
by Harakka
Ihan hienolta vaikuttaa, mutta mitä rent tarkoittaa funktion nimessä? :P Rectangle = suorakulmio englanniksi, siitä tulee kyllä lyhenne rect.

Re: RoundRent - Pyöreäreunainen suorakulmio

Posted: Mon Jan 14, 2008 7:24 pm
by Koodiapina
Harakka wrote:Rectangle = suorakulmio englanniksi, siitä tulee kyllä lyhenne rect.
Okei, vaihan.

Re: RoundRect - Pyöreäreunainen suorakulmio

Posted: Thu Jan 17, 2008 5:51 pm
by Kassu
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.

Re: RoundRect - Pyöreäreunainen suorakulmio

Posted: Thu Jan 17, 2008 9:16 pm
by otto90x
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

Re: RoundRect - Pyöreäreunainen suorakulmio

Posted: Fri Jan 18, 2008 12:25 am
by MaGetzUb
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

Re: RoundRect - Pyöreäreunainen suorakulmio

Posted: Fri Jan 18, 2008 4:12 pm
by koodaaja
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.

Re: RoundRect - Pyöreäreunainen suorakulmio

Posted: Fri Jan 18, 2008 5:00 pm
by Kassu
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


Re: RoundRect - Pyöreäreunainen suorakulmio

Posted: Fri Jan 18, 2008 5:07 pm
by Koodiapina
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.


Re: RoundRect - Pyöreäreunainen suorakulmio

Posted: Fri Jan 18, 2008 6:36 pm
by Kassu
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ä.

Re: RoundRect - Pyöreäreunainen suorakulmio

Posted: Fri Jan 18, 2008 8:04 pm
by MaGetzUb
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. ;)