Crearea de grafice folosind draw2d și swt pe platforma java

Creați propriul dvs. cod independent de platformă pentru a compila grafice X-Y, grafice de bare etc.

Crearea de diagrame și grafice pe platforma Java ™ a fost întotdeauna de interes pentru dezvoltatori. În mod tradițional, dezvoltatorii Java au folosit java.awt.Graphics sau API-ul Java 2D pentru acest lucru. Unele pot utiliza instrumente de tip open source, cum ar fi JSci. Cu toate acestea, multe dintre opțiunile disponibile vă limitează la alegerea AWT sau Swing. Pentru a minimiza dependența de instrumentele terților sau pentru a face desenul mai ușor, luați în considerare utilizarea Draw2D și scrieți propriul cod de desen.







Indiver Dwivedi. Senior Software Engineer, IBM India

Într-o scurtă descriere despre Draw2D

DrawD este un sistem ușor de elemente grafice plasate pe SWT Composite. Instanța Draw2D constă dintr-un compozit SWT, un sistem ușor și primitive grafice. Primitivele grafice sunt componentele Draw2D. Informațiile complete despre API-ul Draw2D se află în sistemul de ajutor Eclipse din "Ghidul dezvoltatorului Draw2D". Deoarece în acest articol nu vom învăța Draw2D, este suficient să înțelegeți că API-ul Draw2D vă ajută să desenați imagini pe canava SWT. Puteți utiliza primitive grafice standard, de exemplu, Ellipse, Polyline, RectangleFigure și Triangle direct; Le puteți extinde prin crearea propriilor primitive grafice. În plus, unele recipiente primitive, cum ar fi panoul, pot acționa ca un container comun pentru toate elementele copilului.

DrawD are două pachete importante: org.eclipse.draw2d.geometry și org.eclipse.draw2d.graph, pe care le folosesc în acest articol. Pachetul org.eclipse.draw2d.geometry conține clase utile, cum ar fi, de exemplu, dreptunghi. Point și PointList. fără a cere o explicație. Este posibil ca dezvoltatorii să nu fi colaborat îndeaproape cu celălalt pachet org.eclipse.draw2d.graph. Acest pachet oferă câteva clase importante, cum ar fi DirectedGraph. Nod. Edge. NodeList și EdgeList. ajutând la crearea de grafice.

În acest articol, vă voi explica cum să utilizați Draw2D pentru a scrie codul care vă ajută să vizualizați grafic datele. Încep cu o descriere a tehnicilor pentru a scala valorile de date aparținând aceluiași interval (de exemplu 0-2048) în valori echivalente aparținând altei game (de exemplu, 0 la 100). Apoi voi ilustra cum să desenez o diagramă X-Y din orice număr de secvențe, fiecare conținând un set de elemente de date. După ce studiați conceptele generale, puteți desena cu ușurință alte tipuri de grafice, de exemplu, tabelele sectoriale și bare.

Procesul de desen grafic pas cu pas

Pasul 1: Ce vrei să desenezi?

Evident, doriți să afișați date dintr-o sursă de date ca un grafic. Adică avem nevoie de date pentru vizualizare într-un format grafic. Pentru brevitate, în loc să citesc date dintr-un fișier XML sau dintr-o altă sursă de date, am generat datele într-o funcție simplă numită dataGenerator. care utilizează buclă pentru (;;) și returnează valorile generate ca o listă de matrice.

Listarea 1. Generarea de date

Pasul 2: Tehnica de scalare - generați coordonatele X și Y din datele disponibile

Noi concepte

FiguraCanvas în Draw2D este o extensie a SWT Canvas. FiguraCanvas poate conține primitive grafice Draw2D.

Panoul este un container cu primitive grafice generale în Draw2D, care pot conține primitivi primitivi. Puteți adăuga mai multe primitive într-un singur panou și apoi adăugați acest element pe PanelCanvas.

DirectedGraph este un grafic 2-D care are un număr finit de elemente Node. Fiecare nod este localizat pe un anumit punct. nodurile adiacente sunt conectate (sau conectate) între ele prin intermediul muchiilor.

Când doriți să desenați un grafic pe un plan 2-D, trebuie să găsiți coordonatele X și Y ale fiecărui punct. grafice de desen magic este abilitatea de a scala datele disponibile de la un interval la altul, adică pentru un set de valori, de exemplu, trebuie să decideți exact ceea ce indică (în coordonatele X și Y) pe planul 2-D reprezintă valorile 10, 20 și 30 .

Întotdeauna trageți pe o scară fixă. Cu alte cuvinte, puteți desena orice număr de puncte într-o zonă limitată. Deoarece zona este fixă, puteți găsi întotdeauna un interval (lungime) de-a lungul axei X și intervalul (înălțime) de-a lungul axei Y. Knowing intervale de-a lungul X și axa Y - aceasta este doar o parte a ecuației. Cealaltă parte este de a găsi domeniul valorilor datelor și de a calcula coordonatele fiecărei valori, găsind valoarea echivalentă în noul interval.

Calculul coordonatelor X și Y

X-coordonate. Coordonata X este distanța până la un punct orizontal de la origine. Distanțele orizontale pentru toate punctele din set se calculează prin simpla numărare a numărului de elemente și împărțind lungimea axei X pe segmente n, unde n este egal cu numărul de elemente din setul dat. Ca rezultat al acestei diviziuni, obținem lungimea fiecărui segment. Primul punct al setului este situat la o distanță egală cu lungimea segmentului. Fiecare punct următor este situat la o distanță de lungimea segmentului plus distanța de la origine la punctul anterior.

De exemplu, pentru un set, vedeți imediat că trebuie să desenați patru puncte, deoarece setul conține patru valori. Astfel, axa X ar trebui împărțită în patru segmente identice cu lungimea lungime = span / 4. Astfel, dacă lungimea axei X este 800, lungimea segmentului va fi 800/4 sau 200. Coordonata X a primului element (10) va fi 200, al doilea element (20) va fi 400, etc.

Listing 2. Calculul coordonatelor X

Y coordonate. Coordonata Y este distanța până la punctul de la originea coordonatelor de-a lungul verticalei. Calculul coordonatelor Y constă în scalarea valorilor de la un interval la altul. De exemplu, pentru a seta valori, se observă că intervalul de date este 0 până la 40, și o nouă gamă de - o axă lungime (înălțime) Y. Presupunând că înălțimea axei Y este 400, echivalentă cu înălțimea primului element (10) este egal cu 100, al doilea element (20) - 200, și așa mai departe.







Puteți înțelege mai bine procesul de scalare a valorilor de la un interval la altul în exemplul următor. Să presupunem că un interval de valori este 0-2048 și doriți să scalați orice valoare din acest interval (de exemplu, 1024) într-un alt interval de 0-100. Veți găsi imediat rezultatul - valoarea echivalentă este 50. Scalarea implică următoarele trei linii de aritmetică:

Pasul 3: Unde doriți să desenați?

Ai nevoie de o zonă pentru desen. Creați o vizualizare proprie prin extinderea Eclipse ViewPart și folosind SWT Composite. Alternativ, puteți utiliza învelișul SWT numit din funcția m ain ().

Cu extensia Eclipse ViewPart, trebuie să implementați cel puțin două funcții: createPartControl (parental compozit) și setFocus (). Funcția createPartControl (Parent Composite) este apelată automat atunci când vizualizarea dvs. trebuie extrasă pe ecran. Vă interesează numai compozitul SWT astfel obținut. Treceți-l la clasa pe care ați scris-o pentru a compila graficele.

Listarea 3. Folosind Eclipse ViewPart pentru desen

Pasul 4: Ce tip de grafică aveți nevoie?

Dacă aveți date și o zonă pentru desen, trebuie să decideți ce tip de vizualizare aveți nevoie. În acest articol voi demonstra cum să scrieți codul pentru a crea un grafic liniar. Dacă înțelegeți tehnica care stă la baza graficii grafice liniare, veți putea desena alte tipuri de grafice, de exemplu, tabelele sectoriale și bare. Pentru a afla cum să construiți o diagramă liniară, examinați clasa DirectedGraphXYPlotter. pe care l-am scris pentru acest articol. (vedeți fișierul \ src \ GraFix \ Plotters \ DirectedGraphXYPlotter.java în codul sursă atașat la acest articol).

Pasul 5: Creați propriul constructor de diagrame X-Y

Designerul graficului X-Y ar trebui să poată desena orice număr de linii pe un plan 2-D. Fiecare linie trebuie să prezinte grafic poziția fiecărui punct din secvența sa în raport cu axa X și axa Y. Fiecare punct trebuie conectat la următorul punct al secvenței printr-o linie. Puteți crea un astfel de constructor utilizând primitive grafice Draw2D reprezentând un punct și o linie. De exemplu, pentru a reprezenta un punct, am creat primitivul Dot prin extinderea primitivului Ellipse și am folosit PolylineConnection pentru a reprezenta trunchiurile.

Clasa DirectedGraphXYPlotter are doar două funcții cu specificarea accesului public: setData (arrayList seriesData) și plot (). Funcția setData (ArrayList seriesData) ia datele (vezi pasul 1) pe care doriți să le vizualizați grafic și funcția plot () începe să deseneze un grafic.

După ce apelați funcția plot (), trebuie să efectuați secvențial următoarele acțiuni:

  1. Luați SWT Composite și puneți FiguraCanvas pe el. Apoi puneți un panou primitiv general pe panza, de exemplu Panou.
  2. Numărați numărul de secvențe pentru plotarea graficului și completați numărul necesar de NodeLists și EdgeLists pentru a crea DirectedGraphs.
  3. Desenați axele X și Y de pe panoul primitiv. (A se vedea. Fișiere XRulerBar.java YRulerBar.java în directorul \ src \ Grafix \ figura atașată la articol sursă).
  4. Creați cât mai multe directori direcționați. câte secvențe există pentru desen.
  5. Desenați punctele și trunchiurile de pe primitivul Panoului, obținând datele din grafic din DirectedGraphs. creată în etapa d.
  6. În cele din urmă, instalați conținutul panzei furnizând o primită de panou care conține toate punctele și trunchiurile pe care le-ați pregătit.

În codul de mai jos:

  • Linile 6-11 corespund pasului a.
  • Linia 14, funcția populateNodesAndEdges (). corespunde etapei b.
  • Linia 16, funcția drawAxis (), corespunde pasului c.
  • Linile 17, 18 și 19 corespund etapelor d și e.
  • Linia 20 corespunde pasului f.
Listing 4. Funcția plot ()

Două funcții interne importante sunt numite în plot (). populateNodesAndEdges () și drawDotsAndConnections () ajută la desenarea punctelor. Înainte de a afla ce anume fac aceste funcții, considerați DirectedGraph.

Ce este DirectedGraph? Pentru a desena un grafic în Draw2D, trebuie mai întâi să creați un grafic pentru a determina punctele și liniile care trebuie desenate. După crearea acestei diagrame, o puteți folosi mai târziu pentru a începe de fapt să desenați primitive pe panza. Puteți face un DirectedGraph ca o grafică 2-D care are un număr finit de elemente Node; fiecare element Nod este localizat la un punct (Point); nodurile adiacente sunt conectate (sau conectate) între ele prin elemente Edges.

Puteți înțelege misterul creării directorului DirectedGraph utilizând următoarele rânduri de cod. Mai întâi, creați o listă de noduri și o listă de elemente Edges. Apoi, creați un nou DirectedGraph și specificați ca membri (Noduri și muchii) listele nou create NodeList și EdgeList. Utilizați GraphVisitor pentru a vă referi la acest DirectedGraph. Pentru simplificare, pachetul org.eclipse.draw2d.internal.graph conține multe implementări ale GraphVisitor. care au deja algoritmi specializați pentru accesarea graficelor.

Deci, exemplul de cod pentru activarea DirectedGraph poate fi:

Listing 5. Exemplu de DirectedGraph

Acum, că știți că DirectedGraph conține o listă de noduri. în care fiecare nod poate să dețină anumite date și să-și păstreze coordonatele X și Y și o listă a elementelor Edges. în care fiecare margine cunoaște aproximativ două elemente de noduri la ambele capete, puteți utiliza această informație pentru a desena grafice aplicând următoarea tehnică din două părți:

Partea A - Umpleți nodurile și marginile prin:

  • Crearea unui NodeList. care conține un Nod pe fiecare element al setului. De exemplu, trebuie să creați patru noduri pentru un set.
  • Căutați coordonatele X și Y pentru fiecare element și păstrați-le în variabilele de instanță ale membrilor node.x și node.y.
  • Crearea EdgeList. conținând n-1 elemente ale margini. unde n este numărul de elemente din set. De exemplu, trebuie să creați trei margini pentru un set.
  • Instrucțiuni pentru noduri pentru marginile din stânga și la dreapta ale fiecărei margini și setarea variabilelor de instanță margin.start și respectiv edge.end.

Partea B - Desenează primitivele grafice prezentate de Noduri și muchii prin:

  • Desenarea primitivului Dot reprezentat de fiecare nod.
  • Desenarea primitivului PolilineConnection reprezentat de fiecare Edge.
  • Conectați fiecare primitiv PolylineConnection la primitivele Dot din stânga și dreapta.

Acum să revenim la lucrul cu funcțiile interne:

  • Funcția populateNodesAndEdges () implementează Partea A a metodei în cauză și drawDotsAndConnections () implementează Partea B.
  • Funcția populateNodesAndEdges () numără numărul de secvențe de ieșire din grafic. Creează un NodeList și un EdgeList pentru fiecare secvență.
  • Fiecare NodeList conține o listă de noduri pentru o anumită secvență. Fiecare nod stochează informații despre coordonatele X și Y. Funcțiile getXCoordinates () și getYCoordinates () recuperează valoarea coordonatelor X și Y, respectiv. Aceste funcții de asemenea scară valorile datelor dintr-o gamă în alta folosind algoritmul descris în etapa 2.
  • Fiecare EdgeList conține o listă de margini pentru o anumită secvență. Fiecare margine conține un nod din stânga și un alt nod din partea dreaptă.
Listing 6. Funcția populateNodesAndEdges ()

După populateNodesAndEdges funcția () efectuează lucrările privind crearea și NodeLists EdgeLists pentru toate secvențele, un alt drawDotsAndConnections function () începe să atragă grafica primitivilor Dot pentru fiecare nod și primitivele PolylineConnection pentru fiecare margine.

Listare 7. Funcțiile drawDotsAndConnections (), drawNode () și drawEdge ()
Rezultatul desenării graficului

Dacă aveți nevoie să prezentați grafic datele, Draw2D este un instrument bun. Utilizarea Draw2D pentru a scrie propriul Java cod care efectuează desen diagrame și grafice care vă pot ajuta să vă concentrați asupra scalarea de cod și de desen, lăsând Draw2D și munca SWT de redare și de afișare. De asemenea, puteți controla aspectul graficelor dvs., utilizând primitivele grafice Draw2D la alegerea dvs. Draw2D simplifică lucrul de bază al desenelor și diagramelor și minimizează dependența de instrumentele terților.







Pagina anterioară

Pagina următoare

Trimiteți-le prietenilor: