RoundRect - Pyöreäreunainen suorakulmio

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

RoundRect - Pyöreäreunainen suorakulmio

Post 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 
Last edited by Koodiapina on Mon Jan 14, 2008 6:25 pm, edited 1 time in total.
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 »

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)
Koodiapina
Forum Veteran
Posts: 2396
Joined: Tue Aug 28, 2007 4:20 pm

Re: RoundRent - Pyöreäreunainen suorakulmio

Post by Koodiapina »

Harakka wrote:Rectangle = suorakulmio englanniksi, siitä tulee kyllä lyhenne rect.
Okei, vaihan.
Kassu
Newcomer
Posts: 22
Joined: Wed Aug 29, 2007 5:32 pm

Re: RoundRect - Pyöreäreunainen suorakulmio

Post 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.
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 »

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.
MaGetzUb
Guru
Posts: 1715
Joined: Sun Sep 09, 2007 12:35 pm
Location: Alavus

Re: RoundRect - Pyöreäreunainen suorakulmio

Post 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
Solar Eclipse
Meneillä olevat Projektit:
We're in a simulation, and God is trying to debug us.
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 »

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.
Kassu
Newcomer
Posts: 22
Joined: Wed Aug 29, 2007 5:32 pm

Re: RoundRect - Pyöreäreunainen suorakulmio

Post 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

Last edited by Kassu on Fri Jan 18, 2008 4:17 pm, edited 1 time in total.
Koodiapina
Forum Veteran
Posts: 2396
Joined: Tue Aug 28, 2007 4:20 pm

Re: RoundRect - Pyöreäreunainen suorakulmio

Post 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.

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

Re: RoundRect - Pyöreäreunainen suorakulmio

Post 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ä.
MaGetzUb
Guru
Posts: 1715
Joined: Sun Sep 09, 2007 12:35 pm
Location: Alavus

Re: RoundRect - Pyöreäreunainen suorakulmio

Post 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. ;)
Solar Eclipse
Meneillä olevat Projektit:
We're in a simulation, and God is trying to debug us.
Post Reply