Programiranje

Načrtujte svojo pot do komponent grafa po meri

Naše komponente grafa po meri zahtevajo ročno risanje, zato bomo morali podrazred Platno, ki je standardna komponenta za neposredno grafično manipulacijo. Tehnika, ki jo bomo uporabili, bo preglasitev barva metoda Platno z risbo po meri, ki jo potrebujemo. Uporabili bomo Grafika predmet, ki se samodejno prenese v barva za dostop do barv in načinov risanja.

Ustvarili bomo dve grafični komponenti po meri: palični grafikon in črtni graf. Začeli bomo z gradnjo splošnega okvirnega razreda za dva grafa, ki si delita nekaj osnovnih elementov.

Gradnja splošnega okvira grafov

Črtni grafikon in stolpčni grafikon, ki ga bomo zgradili, sta dovolj podobna, da lahko ustvarimo generično

Graf

razred, da izvede nekaj dolgočasnih postavitvenih del. Ko je to končano, lahko nato razširimo razred za določeno vrsto grafa, ki ga potrebujemo.

Prva stvar, ki jo morate narediti pri oblikovanju grafičnih komponent po meri, je, da pisalo položite na papir in narišete sliko, kar potrebujete. Ker štejemo slikovne pike, se enostavno umešamo glede postavitve elementov. Če nekaj premislite o poimenovanju in pozicioniranju elementov, boste lažje ohranili kodo čistejšo in jo boste lažje brali pozneje.

Črtni graf in stolpčni grafikon uporabljata enako postavitev naslova in vrstic, zato bomo začeli z ustvarjanjem splošnega grafa, ki vsebuje ti dve značilnosti. Postavitev, ki jo bomo ustvarili, je prikazana na spodnji sliki.

Če želite ustvariti generično Graf razred, bomo podrazred Platno. Sredinsko območje je mesto, kjer bodo prikazani dejanski podatki grafa; to bomo prepustili podaljšanju Graf za izvajanje. Ostale elemente - naslovno vrstico, navpično črto na levi, vodoravno črto na dnu in vrednosti za obseg - bomo implementirali v osnovni razred. Lahko bi določili pisavo in trdo kodirali meritve pikslov, vendar uporabnik ne bi mogel spremeniti velikosti grafa. Boljši pristop je merjenje elementov glede na trenutno velikosti komponente, tako da bo pri spreminjanju velikosti aplikacije prišlo do pravilne velikosti grafa.

Tu je naš načrt: Vzeli bomo Vrvica naslov, an int najmanjša vrednost in int največja vrednost v konstruktorju. Ti nam dajejo vse informacije, ki jih potrebujemo za postavitev okvira. Obdržali bomo štiri spremenljivke za uporabo v podrazredih - vrh, spodaj, levo, in prav vrednosti za meje območja risanja grafa. Te spremenljivke bomo pozneje uporabili za izračun pozicioniranja elementov grafa. Začnimo s hitrim pogledom na Graf izjava razreda.

uvoz java.awt. *; uvoz java.util. *; javni razred Graph razširja Canvas {// spremenljivke, potrebne public int top; javno int dno; javni int levo; javna int pravica; int titleHeight; int labelWidth; FontMetrics fm; int oblazinjenje = 4; Naslov niza; int min; int max; Vektorski predmeti; 

Za izračun pravilne postavitve elementov grafa moramo najprej izračunati regije v naši splošni postavitvi grafov, ki sestavljajo ogrodje. Za izboljšanje videza komponente na zunanje robove dodamo oblazinjenje s 4 slikovnimi pikami. Naslov bomo dodali na sredino na vrhu, pri čemer bomo upoštevali območje zapolnjevanja. Da se prepričamo, da graf ni narisan na vrhu besedila, moramo od naslovne regije odšteti višino besedila. Enako moramo storiti za min in maks oznake obsega vrednosti. Širina tega besedila je shranjena v spremenljivki labelWidth. Za meritve moramo imeti sklic na meritve pisave. The predmetov vektor se uporablja za sledenje vseh posameznih elementov, ki so bili dodani komponenti Graf. Razred, ki se uporablja za shranjevanje spremenljivk, povezanih z grafičnimi elementi, je vključen (in razložen) za Graf razred, ki je prikazan naslednji.

 javni graf (naslov niza, int min, int max) {this.title = naslov; to.min = min; this.max = max; items = novo Vector (); } // končni konstruktor 

Konstruktor vzame naslov grafa in obseg vrednosti, za posamezne postavke grafa pa ustvarimo prazen vektor.

 javno preoblikovanje praznine (int x, int y, int širina, int višina) {super.reshape (x, y, width, height); fm = getFontMetrics (getFont ()); titleHeight = fm.getHeight (); labelWidth = Math.max (fm.stringWidth (novo celo število (min) .toString ()), fm.stringWidth (novo celo število (max) .toString ())) + 2; zgoraj = oblazinjenje + titleHeight; dno = velikost (). višina - oblazinjenje; levo = oblazinjenje + labelWidth; desno = velikost (). širina - oblazinjenje; } // konec preoblikovanja 

Opomba: V JDK 1.1 je preoblikovati metoda se nadomesti z public void setBounds (pravokotnik r). Za podrobnosti glejte dokumentacijo API.

Preglasimo preoblikovati metoda, ki se podeduje po verigi od Komponenta razred. The preoblikovati metoda se prikliče, ko je komponenta spremenjena in ko je postavljena prvič. To metodo uporabljamo za zbiranje meritev, tako da bodo v primeru spremembe velikosti komponente vedno posodobljene. Pridobimo meritve pisave za trenutno pisavo in dodelimo titleHeight spremenite največjo višino te pisave. Dobimo največjo širino nalepk, preizkusimo, katera je večja, in nato uporabimo tisto. The vrh, spodaj, levo, in prav spremenljivke so izračunane iz drugih spremenljivk in predstavljajo meje območja risanja sredinskega grafa. Te spremenljivke bomo uporabili v podrazredih Graf. Upoštevajte, da vse meritve upoštevajo a trenutno velikosti komponente, tako da bo risanje pravilno pri kateri koli velikosti ali vidiku. Če smo uporabili trdo kodirane vrednosti, komponente ni bilo mogoče spremeniti.

Nato bomo narisali okvir za graf.

 public void paint (Graphics g) {// nariši naslov fm = getFontMetrics (getFont ()); g.drawString (naslov, (velikost (). širina - fm.stringWidth (naslov)) / 2, zgoraj); // narišemo največjo in najmanjšo vrednost g.drawString (novo celo število (min) .toString (), oblazinjenje, spodaj); g.drawString (novo celo število (max) .toString (), oblazinjenje, top + titleHeight); // narišemo navpične in vodoravne črte g.drawLine (levo, zgoraj, levo, spodaj); g.drawLine (levo, spodaj, desno, spodaj); } // končna barva 

Okvir je izrisan v barva metoda. Naslov in nalepke narišemo na ustrezna mesta. Na levi obrobi območja za risanje grafov narišemo navpično črto, na spodnji pa vodoravno črto.

V tem naslednjem delčku nastavimo želeno velikost komponente tako, da preglasimo preferSize metoda. The preferSize metoda je podedovana tudi iz Komponenta razred. Sestavni deli lahko določijo želeno velikost in najmanjšo velikost. Izbral sem prednostno širino 300 in prednostno višino 200. Upravitelj postavitve bo to metodo poklical, ko bo postavil komponento.

 public Dimension preferenceSize () {return (nova dimenzija (300, 200)); }} // končni graf 

Opomba: V JDK 1.1 je preferSize metoda se nadomesti z javna dimenzija getPreferredSize ().

Nato potrebujemo pripomoček za dodajanje in odstranjevanje predmetov, ki jih želimo prikazati.

 public void addItem (ime niza, vrednost int, barva col) {items.addElement (novo GraphItem (ime, vrednost, col)); } // konec addItem public void addItem (Ime niza, vrednost int) {items.addElement (novo GraphItem (ime, vrednost, Color.black)); } // konec addItem public void removeItem (String name) {for (int i = 0; i <items.size (); i ++) {if ((((GraphItem) items.elementAt (i)). title.equals (name )) items.removeElementAt (i); }} // konec removeItem} // konec grafa 

Zgledal sem addItem in removeItem metode po podobnih metodah v Izbira razred, tako da bo koda imela znane občutke. Upoštevajte, da uporabljamo dve addItem metode tukaj; potrebujemo način za dodajanje elementov z barvo ali brez. Ko je element dodan, se doda nov GraphItem objekt se ustvari in doda v vektor elementov. Ko je element odstranjen, bo odstranjen prvi v vektorju s tem imenom. The GraphItem razred je zelo preprost; tukaj je koda:

uvoz java.awt. *; class GraphItem {Naslov niza; vrednost int; Barvna barva; javni GraphItem (naslov niza, vrednost int, barva barve) {this.title = naslov; this.value = vrednost; this.color = barva; } // končni konstruktor} // konec GraphItem 

The GraphItem class deluje kot imetnik spremenljivk, ki se nanašajo na grafične postavke. Sem vključil Barva tukaj v primeru, da bo uporabljen v podrazredu Graf.

S tem ogrodjem lahko ustvarimo razširitve za obdelavo vsake vrste grafa. Ta strategija je zelo priročna; ni nam treba znova meriti pikslov za ogrodje in lahko ustvarimo podrazrede, da se osredotočimo na zapolnitev regije za risanje grafov.

Izdelava stolpčnega grafikona

Zdaj, ko imamo grafični okvir, ga lahko prilagodimo z razširitvijo

Graf

in izvajanje risbe po meri. Začeli bomo s preprostim stolpčnim grafikonom, ki ga lahko uporabljamo tako kot katero koli drugo komponento. Tipični palični grafikon je prikazan spodaj. Zapolnili bomo območje risanja grafov, tako da bomo razveljavili

barva

metoda za klic superklase

barva

(za risanje ogrodja), nato izvedemo risbo po meri, potrebno za to vrsto grafa.

uvoz java.awt. *; javni razred BarChart razširja graf {int položaj; prirastek int; javni BarChart (naslov niza, int min, int max) {super (naslov, min, max); } // končni konstruktor 

Za enakomerno razporeditev elementov hranimo prirastek spremenljivka, ki označuje znesek, ki ga bomo za posamezen element premaknili v desno. Spremenljivka položaja je trenutni položaj in vsakič se ji doda vrednost prirastka. Konstruktor preprosto sprejme vrednosti za super konstruktor (Graf), ki ga izrecno imenujemo.

Zdaj lahko pridemo do neke dejanske risbe.

 javna prazna barva (grafika g) {super.paint (g); prirast = (desno - levo) / (items.size ()); položaj = levo; Barvna temp = g.getColor (); for (int i = 0; i <items.size (); i ++) {GraphItem item = (GraphItem) items.elementAt (i); int prilagojenaVrednost = spodaj - (((item.value - min) * (od spodaj - zgoraj)) / (max - min)); g.drawString (item.title, položaj + (prirastek - fm.stringWidth (item.title)) / 2, prilagojena vrednost - 2); g.setColor (item.color); g.fillRect (položaj, prilagojena vrednost, prirastek, dno - prilagojena vrednost); položaj + = prirastek; g.setColor (temp); }} // konec barve} // konec BarChart 

Poglejmo si natančno, kaj se tukaj dogaja. V barva metodo imenujemo nadrazred barva metoda za risanje okvira grafa. Nato najdemo prirastek tako da desni rob odštejemo od levega in rezultat delimo s številom elementov. Ta vrednost je razdalja med levimi robovi elementov grafa. Ker želimo, da je graf mogoče spreminjati, te vrednosti temeljimo na trenutni vrednosti levo in prav spremenljivke, podedovane od Graf. Spomnimo se, da levo, prav, vrh, in spodaj Vrednosti so trenutne dejanske meritve slikovnih pik v območju risanja grafa, izvedene v preoblikovati metoda Graf, in zato na voljo za našo uporabo. Če meritev ne bi temeljile na teh vrednostih, grafa ne bi bilo mogoče spremeniti.

Pravokotnike bomo narisali v barvi, ki jo določa GraphItem. Za vrnitev na prvotno barvo smo nastavili začasno barva spremenljivka za zadrževanje trenutne vrednosti, preden jo spremenimo. Kolesarimo po vektorju elementov grafa, izračunamo prilagojeno navpično vrednost za vsakega, narišemo naslov predmeta in izpolnjen pravokotnik, ki predstavlja njegovo vrednost. Prirastek se vsakič skozi zanko doda spremenljivki položaja x.

Prilagojena navpična vrednost zagotavlja, da bo graf, če bo navpično raztegnjen, še vedno ostal zvest vrisanim vrednostim. Če želite to narediti pravilno, moramo vzeti odstotek obsega, ki ga element predstavlja, in to vrednost pomnožiti z dejanskim obsegom slikovnih pik v območju risanja grafa. Nato rezultat odštejemo od spodaj vrednost za pravilno risanje točke.

Kot lahko vidite iz naslednjega diagrama, je celotna velikost vodoravnih slikovnih pik predstavljena z desno levo skupna navpična velikost pa je predstavljena z spodaj - zgoraj.

Za horizontalno raztezanje poskrbimo z inicializacijo položaj spremenljivka na levi rob in jo poveča za prirastek spremenljivka za vsak element. Zaradi položaj in prirastek spremenljivke so odvisne od dejanskih trenutnih vrednosti slikovnih pik, komponenta je vedno pravilno spremenjena v vodoravni smeri.

Da zagotovimo, da je navpično risanje vedno pravilno, moramo preslikati vrednosti elementov grafa z dejanskimi umestitvami v slikovnih pikah. Obstaja en zaplet: maks in min vrednosti bi morale biti pomembne za položaj vrednosti elementa grafa. Z drugimi besedami, če se graf začne pri 150 in gre na 200, se mora postavka z vrednostjo 175 prikazati na polovici navpične osi. Da bi to dosegli, najdemo odstotek obsega grafa, ki ga element predstavlja, in ga pomnožimo z dejanskim obsegom slikovnih pik. Ker je naš graf obrnjen na glavo od koordinatnega sistema grafičnega konteksta, to število odštejemo od spodaj da bi našli pravilno točko ploskve. Ne pozabite, da je izvor (0,0) v zgornjem levem kotu kode, spodnji levi pa slog sloga grafa, ki ga ustvarjamo.

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