Ohjelmointi

Kaavio matkasi mukautettuihin kaavioosiin

Mukautetut graafikomponentit vaativat manuaalisen piirtämisen, joten meidän on alaluokka Kangas, joka on vakiokomponentti, joka on tarkoitettu suoraan grafiikan käsittelyyn. Tekniikka, jota aiomme käyttää, on ohittaa maali- menetelmä Kangas tarvitsemamme mukautetun piirustuksen kanssa. Käytämme Grafiikka objekti, joka siirretään automaattisesti maali- kaikkien komponenttien menetelmä, jotta pääset väreihin ja piirtomenetelmiin.

Luomme kaksi mukautettua kuvaajan osaa: pylväskaavio ja viivakaavio. Aloitamme rakentamalla yleisen kehysluokan kahdelle kuvaajalle, jotka jakavat joitain peruselementtejä.

Rakennetaan yleinen kuvaajakehys

Suunnittelemamme viivakaavio ja pylväsdiagrammi ovat riittävän samanlaisia, jotta voimme luoda yleisen

Kaavio

luokassa suorittamaan joitain tylsiä asettamistöitä. Kun se on tehty, voimme laajentaa luokkaa haluamallemme kaavioon.

Ensimmäinen tehtävä, kun suunnittelet mukautettuja grafiikkakomponentteja, on laittaa kynä paperille ja piirtää kuva tarvitsemastasi. Koska laskemme pikseleitä, on helppo sekoittua elementtien sijoitteluun. Ajattelemalla elementtien nimeämistä ja sijoittamista voit auttaa pitämään koodin puhtaana ja helpommin luettavissa myöhemmin.

Viivakaavio ja pylväsdiagrammi käyttävät samaa asettelua otsikossa ja viivoissa, joten aloitetaan luomalla yleinen kaavio, joka sisältää nämä kaksi ominaisuutta. Asettelun, jonka aiomme luoda, on esitetty alla olevassa kuvassa.

Voit luoda yleisen Kaavio luokassa, alaluokka Kangas. Keskialue on paikka, jossa kaavion todelliset tiedot näytetään; jätämme tämän laajennukselle Kaavio toteuttaa. Toteutamme muut elementit - otsikkorivin, pystyviivan vasemmalle, vaakasuoran viivan pohjalle ja alueen arvot - perusluokkaan. Voisimme määrittää fontin ja koodata pikselimittaukset, mutta käyttäjä ei pysty muuttamaan kuvaajan kokoa. Parempi lähestymistapa on mitata elementtejä nykyinen komponentin koko, joten sovelluksen koon muuttaminen johtaa kaavion oikeaan kokoon.

Tässä on suunnitelmamme: Otamme a Merkkijono otsikko, an int vähimmäisarvo ja int suurin arvo konstruktorissa. Nämä antavat meille kaikki tarvittavat tiedot puitteiden laatimiseksi. Säilytämme neljä muuttujaa käytettäväksi alaluokissa - alkuun, pohjassa, vasemmalleja oikein arvot kaavion piirustusalueen rajoille. Käytämme näitä muuttujia laskemaan kaavion kohteiden sijainnin myöhemmin. Aloitetaan katsomalla nopeasti Kaavio luokan ilmoitus.

tuo java.awt. *; tuo java.util. *; public class Graph laajentaa Canvas {// muuttujia tarvitaan public int top; julkinen sisäinen pohja; julkinen int vasen; julkinen int oikeus; int titleHeight; int labelWidth; FontMetrics fm; int-täyte = 4; Merkkijonon nimi; int min; int max; Vector-tuotteet; 

Kaavioelementtien oikean sijoittelun laskemiseksi meidän on ensin laskettava alueet yleisessä kaavioasettelussa, jotka muodostavat kehyksen. Komponentin ulkonäön parantamiseksi lisäämme 4-pikselin täyte ulkoreunoihin. Lisätään otsikko keskelle yläosaan, ottaen huomioon pehmustealueen. Varmistaaksemme, että kaaviota ei piirretä tekstin päälle, meidän on vähennettävä tekstin korkeus otsikkoalueelta. Meidän on tehtävä sama asia min ja enint arvoalueet. Tämän tekstin leveys tallennetaan muuttujaan labelWidth. Meidän on pidettävä viittaus fontin mittareihin mittausten tekemiseksi. kohteita vektoria käytetään seuraamaan kaikkia yksittäisiä kohteita, jotka on lisätty Graph-komponenttiin. Luokka, jota käytetään kuvaajan kohteisiin liittyvien muuttujien pitämiseen, sisältyy (ja selitetään) Kaavio luokka, joka näkyy seuraavaksi.

 public Graph (String title, int min, int max) {this.title = otsikko; tämä.min = min; tämä.max = max; items = uusi vektori (); } // loppurakentaja 

Konstruktori ottaa kuvaajan otsikon ja arvojen alueen, ja luomme tyhjän vektorin yksittäisille kaavio-kohteille.

 public void reshape (int x, int y, int leveys, int korkeus) {super.reshape (x, y, leveys, korkeus); fm = getFontMetrics (getFont ()); titleHeight = fm.getHeight (); labelWidth = Math.max (fm.stringWidth (uusi kokonaisluku (min) .toString ()), fm.stringWidth (uusi kokonaisluku (max) .toString ())) + 2; alkuun = täyte + otsikkoKorkeus; pohja = koko (). korkeus - pehmuste; vasen = täyte + labelWidth; oikea = koko (). leveys - pehmuste; } // lopeta muotoilu 

Huomaa: JDK 1.1: ssä muotoilla uudelleen menetelmä korvataan menetelmällä public void setBounds (Suorakulmio r). Katso lisätietoja API-dokumentaatiosta.

Ohitamme muotoilla uudelleen menetelmä, joka periytyy ketjussa alaspäin Komponentti luokassa. muotoilla uudelleen menetelmää kutsutaan, kun komponentin kokoa muutetaan ja kun se asetetaan ensimmäistä kertaa. Käytämme tätä menetelmää mittausten keräämiseen, jotta ne päivitetään aina, jos komponentin kokoa muutetaan. Saamme nykyisen fontin kirjasimetiedot ja määritämme titleHeight muuttaa fontin enimmäiskorkeutta. Saamme tarrojen enimmäisleveyden, testaamalla, kumpi on suurempi, ja sitten käyttämällä sitä. alkuun, pohjassa, vasemmalleja oikein muuttujat lasketaan muista muuttujista ja ne edustavat keskikaavion piirustusalueen rajoja. Käytämme näitä muuttujia ryhmän Kaavio. Huomaa, että kaikissa mittauksissa otetaan huomioon a nykyinen komponentin koko niin, että piirustus on oikein missä tahansa koossa tai kuvassa. Jos käytämme kovakoodattuja arvoja, komponentin kokoa ei voitu muuttaa.

Seuraavaksi piirrämme kaavion kehyksen.

 public void paint (Grafiikka g) {// piirtää otsikko fm = getFontMetrics (getFont ()); g.drawString (otsikko, (koko (). leveys - fm.stringWidth (otsikko)) / 2, yläosa); // piirtää max- ja min-arvot g.drawString (uusi kokonaisluku (min) .toString (), pehmuste, pohja); g.drawString (uusi kokonaisluku (max) .toString (), pehmuste, top + titleHeight); // piirrä pysty- ja vaakasuorat viivat g.drawLine (vasen, ylhäältä, vasemmalta, alhaalta); g.drawLine (vasen, ala, oikea, ala); } // maalimaali 

Kehys on piirretty maali- menetelmä. Piirrämme otsikon ja tarrat niiden sopiviin paikkoihin. Piirrämme pystysuoran viivan kuvaajan piirustusalueen vasempaan reunaan ja vaakasuoran viivan alareunaan.

Tässä seuraavassa katkelmassa asetetaan komponentin ensisijainen koko ohittamalla PreferredSize menetelmä. PreferredSize menetelmä on myös peritty Komponentti luokassa. Komponentit voivat määrittää ensisijaisen koon ja vähimmäiskoon. Olen valinnut ensisijaisen leveyden 300 ja edullisen korkeuden 200. Asettelunhallinta kutsuu tätä menetelmää, kun se asettaa komponentin.

 public Dimension preferencesSize () {return (new Dimension (300, 200)); }} // kaavion lopetus 

Huomaa: JDK 1.1: ssä PreferredSize menetelmä korvataan menetelmällä public Dimension getPreferredSize ().

Seuraavaksi tarvitsemme välineen graafisten kohteiden lisäämiseksi ja poistamiseksi.

 public void addItem (Merkkijonon nimi, int-arvo, Väri col) {items.addElement (uusi GraphItem (nimi, arvo, sarake)); } // end addItem public void addItem (Merkkijonon nimi, int-arvo) {items.addElement (uusi GraphItem (nimi, arvo, Color.black)); } // end addItem public void removeItem (String name) {for (int i = 0; i <items.size (); i ++) {if ((((GraphItem) items.elementAt (i)). title.equals (nimi )) items.removeElementAt (i); }} // end removeItem} // end Graph 

Olen mallinnanut lisää tavara ja Poista esine menetelmät vastaavien menetelmien jälkeen Valinta luokassa, joten koodilla on tuttu tunnelma. Huomaa, että käytämme kahta lisää tavara menetelmiä tässä; tarvitsemme tavan lisätä kohteita väreillä tai ilman. Kun kohde lisätään, uusi GraphItem objekti luodaan ja lisätään kohteiden vektoriin. Kun kohde poistetaan, vektorin ensimmäinen nimi poistetaan. GraphItem luokka on hyvin yksinkertainen; tässä on koodi:

tuo java.awt. *; luokka GraphItem {Merkkijonon nimi; int-arvo; Väri väri; public GraphItem (Merkkijonon nimi, int-arvo, Väri) {this.title = title; tämä.arvo = arvo; tämä.väri = väri; } // loppu konstruktori} // loppu GraphItem 

GraphItem luokka toimii graafin kohteisiin liittyvien muuttujien haltijana. Olen sisällyttänyt Väri tässä tapauksessa, jos sitä käytetään Kaavio.

Kun tämä kehys on paikallaan, voimme luoda laajennuksia käsittelemään kutakin kaaviotyyppiä. Tämä strategia on varsin kätevä; meidän ei tarvitse mennä vaikeuksiin mitata kehyksen pikseleitä uudelleen, ja voimme luoda alaluokkia keskittyäksemme kaavion piirtoalueen täyttämiseen.

Pylväskaavion rakentaminen

Nyt kun meillä on graafinen kehys, voimme muokata sitä laajentamalla

Kaavio

ja mukautetun piirustuksen toteuttaminen. Aloitamme yksinkertaisella pylväsdiagrammilla, jota voimme käyttää aivan kuten mitä tahansa muuta komponenttia. Tyypillinen pylväskaavio on esitetty alla. Täytämme kaavion piirustusalueen ohittamalla

maali-

menetelmä superluokan kutsumiseksi

maali-

menetelmä (piirtää kehys), suoritamme tämän tyyppiselle kaaviosta tarvittavan mukautetun piirustuksen.

tuo java.awt. *; julkinen luokka BarChart laajentaa kuvaa {int position; int lisäys; public BarChart (String title, int min, int max) {super (otsikko, min, max); } // loppurakentaja 

Jotta kohteet sijoitettaisiin tasaisesti, pidämme lisäys muuttuja osoittaa määrän, jonka siirrämme oikealle kullekin tuotteelle. Sijaintimuuttuja on nykyinen sijainti, ja lisäysarvo lisätään siihen joka kerta. Rakentaja yksinkertaisesti ottaa arvot superrakentajalle (Kaavio), jota kutsumme nimenomaisesti.

Nyt voimme päästä alas todelliseen piirustukseen.

 julkinen tyhjä maali (grafiikka g) {super.paint (g); lisäys = (oikea - vasen) / (items.size ()); asento = vasen; Värilämpötila = g.getColor (); for (int i = 0; i <items.size (); i ++) {GraphItem item = (GraphItem) items.elementAt (i); int AdjustValue = alin - (((kohde-arvo - min) * (alhaalta - ylhäältä)) / (max - min)); g.drawString (item.title, position + (inkrementti - fm.stringWidth (item.title)) / 2, AdjustValue - 2); g.setColor (nimike.väri); g.fillRect (sijainti, oikaistu arvo, lisäys, alhaalla oikaistu arvo); asema + = lisäys; g. setColor (lämpötila); }} // loppu maali} // lopeta pylväskaavio 

Katsotaanpa tarkasti, mitä täällä tapahtuu. vuonna maali- Menetelmää kutsutaan superluokaksi maali- menetelmä piirtää kuvaajan kehys. Sitten löydämme lisäys vähentämällä oikea reuna vasemmasta reunasta ja jakamalla tulos sitten kohteiden lukumäärällä. Tämä arvo on kuvaajan vasemman reunan välinen etäisyys. Koska haluamme, että kaavion kokoa voidaan muuttaa, perustamme nämä arvot graafin nykyiseen arvoon vasemmalle ja oikein muuttujat peritty Kaavio. Muistakaa, että vasemmalle, oikein, alkuunja pohjassa arvot ovat kuvaajan piirtoalueen nykyiset todelliset pikselimittaukset, jotka on otettu muotoilla uudelleen menetelmä Kaavio, ja siksi käytettävissä meidän käyttöön. Jos emme perustaisi mittaustamme näihin arvoihin, kuvaajan kokoa ei voida muuttaa.

Piirrämme suorakulmiot GraphItem. Asetamme väliaikaisen, jotta voimme palata alkuperäiseen väriin väri- muuttuja pitää nykyisen arvon ennen kuin muutamme sitä. Selataan kaavion kohteiden vektorin läpi, lasketaan jokaiselle mukautettu pystysuora arvo, piirretään kohteen otsikko ja täytetty suorakaide, joka edustaa sen arvoa. Lisäys lisätään x-sijaintimuuttujaan joka kerta silmukan läpi.

Säädetty pystysuora arvo varmistaa, että jos komponentti venytetään pystysuoraan, kaavio pysyy edelleen uskollisena sen piirretyille arvoille. Tehdäkseen tämän oikein, meidän on otettava prosenttiosuus alueen edustamasta alueesta ja kerrottava tämä arvo kaavion piirtoalueen todellisella pikselialueella. Sitten vähennämme tuloksen pohjassa arvo piirtää piste oikein.

Kuten seuraavasta kaaviosta näet, horisontaalinen kokonaispikselikoko on esitetty oikea vasen ja pystysuoraa kokoa edustaa alla, päällä.

Hoidamme vaakasuoran venytyksen alustamalla asentoon muuttuu vasemmalle reunalle ja lisää sitä lisäys muuttuja kullekin tuotteelle. Koska asentoon ja lisäys muuttujat ovat riippuvaisia ​​nykyisistä pikseliarvoista, komponentin kokoa muutetaan aina oikein vaakasuunnassa.

Sen varmistamiseksi, että pystysuuntainen piirtäminen on aina oikein, meidän on kartoitettava kaavion kohteen arvot todellisilla pikselipaikoilla. On yksi komplikaatio: enint ja min arvojen tulisi olla merkityksellisiä kuvaajan kohteen arvon sijainnille. Toisin sanoen, jos kaavio alkaa 150: stä ja menee 200: een, kohteen, jonka arvo on 175, pitäisi näkyä pystysuoran akselin puolivälissä. Tämän saavuttamiseksi löydämme kaavion alueen prosenttiosuuden, jota kohde edustaa, ja kerrotaan se todellisella pikselialueella. Koska kaavio on ylösalaisin grafiikan kontekstin koordinaattijärjestelmästä, vähennämme tämän luvun pohjassa löytää oikea juoni kohta. Muista, että alkuperä (0,0) on koodin vasemmassa yläkulmassa, mutta vasemmassa alakulmassa luomamme kaaviotyyli.

$config[zx-auto] not found$config[zx-overlay] not found