Grafika létrehozása a draw2d és a swt segítségével a java platformon

Hozzon létre saját platform-független kódot az X-Y grafikonok, oszlopdiagramok stb. Ábrázolásához.

A grafikonok és grafikonok létrehozása a Java ™ platformon mindig is érdeklődött a fejlesztők számára. Hagyományosan a Java fejlesztők a java.awt.Graphics-ot vagy a Java 2D API-t használják ehhez. Egyesek nyílt forrású eszközöket használhatnak, például a JSci-t. Azonban a rendelkezésre álló lehetőségek közül sok korlátozza az AWT vagy a Swing kiválasztását. A harmadik féltől származó eszközök függőségének minimalizálása vagy a rajz egyszerűbbé tétele érdekében fontolja meg a Draw2D használatát, és írja le saját rajzkódját.

Indiver Dwivedi. Senior Software Engineer, IBM India

Dióhéjban a Draw2D-ről

A DrawD az SWT Composite-hez elhelyezett grafikus elemek könnyűszerkezetes rendszere. A Draw2D példány SWT Composite, könnyű rendszer és grafikus primitívekből áll. A grafikai primitívek a Draw2D építőkövei. A Draw2D API-ról szóló teljes információ az Eclipse súgójában található a "Draw2D fejlesztői útmutatóban". Mivel ebben a cikkben nem fogjuk tanítani a Draw2D-t, elegendő, ha megértjük, hogy a Draw2D API segítségével képet készíthet az SWT Canvason. Használhat szabványos grafikus primitíveket, például az Ellipszist, a Polyline-t, a RectangleFigure-t és a Triangle-t közvetlenül; A saját grafikai primitívek létrehozásával kiterjesztheti őket. Ezenkívül egyes primitív tartályok, mint pl. A panel, minden gyermekelem közös tartályaként működhetnek.

A DrawD két fontos csomaggal rendelkezik: org.eclipse.draw2d.geometry és org.eclipse.draw2d.graph, amelyet ebben a cikkben használok. Az org.eclipse.draw2d.geometry csomag olyan hasznos osztályokat tartalmaz, mint a Téglalap. Pont és PointList. nem igényel magyarázatot. A fejlesztők esetleg nem működtek szorosan együtt a másik org.eclipse.draw2d.graph csomaggal. Ez a csomag tartalmaz néhány fontos osztályt, például a DirectedGraphot. Node. Szélét. NodeList és EdgeList. segít a grafikonok létrehozásában.

Ebben a cikkben megmagyarázom, hogyan használhatom a Draw2D-t a kódíráshoz, amely segít grafikusan megjeleníteni az adatait. Elkezdem azzal a technikával leírni, hogy az ugyanazon tartományba tartozó adatok (például 0-2048) értékét egy másik tartományba (például 0-tól 100-ig) tartozó értékek skálájáig másolják. Ezután bemutatom, hogyan vonjam le az X-Y diagramot bármely sorból, amelyek mindegyike tartalmaz egy adatelemet. Az általános fogalmak tanulmányozása után könnyen rajzolhat más típusú grafikonokat, például ágazati és oszlopdiagramokat.

A grafika lépésről lépésre történő rajzolása

1. lépés: Mit szeretne rajzolni?

Nyilvánvaló, hogy adatokat szeretne az adatforrásból grafikonként megjeleníteni. Vagyis grafikus formátumú vizualizációs adatokra van szükségünk. A rövidség kedvéért, az adatok olvasása helyett egy XML-fájlból vagy más adatforrásból, az adatokat egy egyszerű, DataGenerator nevű függvénybe hoztam létre. amely a for (;;) hurokot használja, és a létrehozott értékeket a tömbök listájaként adja vissza.

Listázás 1. Adatgyűjtés

2. lépés: Méretezési módszer - X és Y koordináták létrehozása a rendelkezésre álló adatokból

Új fogalmak

FigureCanvas a Draw2D-ben az SWT Canvas kiterjesztése. A FigureCanvas tartalmazhat Draw2D grafikus primitíveket.

A panel a Draw2D általános célú grafikai primitívjeinek tartálya, amely tartalmazhat gyermek primitíveket. Több primitívet adhat hozzá egy panelhez, majd hozzáadhatja ezt a panel elemet a FigureCanvas-hoz.

A DirectedGraph egy kétdimenziós grafikon, amely véges számú csomóelemet tartalmaz. Minden csomópont egy ponton található. a szomszédos csomópontok egymáshoz vannak csatlakoztatva (vagy csatlakoztatva) egymáshoz az élek segítségével.

Ha 2-D síkra szeretne rajzolni egy gráfot, meg kell találnia az egyes pontok X és Y koordinátáit. grafikonok rajz a mágikus az a képesség, hogy skála a rendelkezésre álló adatok az egyik tartományban a másikra, azaz egy sor értékek, például, meg kell eldönteni, hogy pontosan mely pontokon (a koordinátái X és Y) 2-D sík értékeket képviselik 10, 20 és 30 .

Mindig rögzített méretet használjon. Más szóval, tetszőleges számú pontot rajzolhat egy korlátozott területen. Mivel a terület rögzített, akkor mindig talál egy intervallum (hosszúság) x tengely mentén, és az intervallum (magasság) tengelye mentén Y. Ismerve időközönként, az X és Y tengely - ez csak egy része az egyenletnek. A másik rész az értékek tartományának megkeresése és az egyes értékek koordinátáinak kiszámítása, az új tartományban az ekvivalens érték megtalálása.

Az X és Y koordináták kiszámítása

X koordinátája. Az X-koordináta a vízszintes ponttól a ponttól való távolság. A halmaz minden pontjára vonatkozó vízszintes távolságokat úgy számoljuk ki, hogy egyszerűen számoljuk az elemek számát és az X tengely hosszát n szegmensekkel osztjuk meg, ahol n egyenlő az adott csoportban lévő elemek számával. E divízió eredményeként minden egyes szegmens hosszát megkapjuk. A készlet első pontja a szegmens hosszával megegyező távolságra van. Minden következő pont a szegmens hosszától, valamint az eredetétől az előző pontig terjedő távolságra található.

Például egy készlet esetében azonnal látja, hogy négy pontot kell rajzolni, mivel a készlet négy értéket tartalmaz. Így az X tengelyt négy azonos szegmensre kell osztani, amelyek hossza = span / 4. Így, ha a hossza a X tengely egyenlő 800, a szegmens hossza egyenlő lesz 800/4, vagy 200. X-koordinátája az első elem (10) egyenlő 200, a második elem (20) - 400, stb

Listázás 2. X-koordináták kiszámítása

Y-koordinátákat. Az Y-koordináta a függőleges mentén a koordináták eredetétől a pontig terjedő távolság. Az Y-koordináták kiszámítása skálázási értékeket tartalmaz az egyik tartományról a másikra. Például, a kívánt értékeket, akkor látható, hogy a különböző adatok 0 és 40, és egy sor új - hossza (magassága) Y. tengelye Feltételezve, hogy a magassága Y tengely 400, amely egyenértékű a magassága az első elem (10) egyenlő 100, a második elem (20) - 200, és így tovább.

A következő példában jobban megértheted az értékek skálázási folyamatát az egyik tartományról a másikra. Tegyük fel, hogy az értékek egy tartománya 0-2048, és szeretnénk bármilyen értéket leválasztani ebből a tartományból (például 1024) egy másik 0-100 tartományba. Ön azonnal megtalálja az eredményt - az egyenérték 50. A skálázás a következő három soros aritmetikai vonalat foglalja magában:

3. lépés: Hol szeretnél rajzolni?

Szüksége van egy kis területre a rajzoláshoz. Hozzon létre saját nézetet az Eclipse ViewPart és az SWT Composite használatával. Alternatív megoldásként használhatja a m ain () függvényből hívott SWT wrapperet is.

Az Eclipse ViewPart kiterjesztéssel legalább két funkciót kell végrehajtania: createPartControl (Composite szülő) és setFocus (). A createPartControl (Composite szülő) funkció automatikusan hívásra kerül, amikor a nézetet a képernyőn kell megjeleníteni. Ön csak az így kapott SWT Composite-t érdekli. Adja át a grafikonok ábrázolásához írt osztályba.

Listázás 3. Az Eclipse ViewPart használata rajzoláshoz

4. lépés: Milyen grafika szükséges?

Ha van adata és egy rajzterülete, akkor el kell döntenie, hogy milyen vizualizálásra van szüksége. Ebben a cikkben megmutatom, hogyan kell írni a kódot lineáris gráf létrehozásához. Ha megértitek a lineáris grafikák rajzolása mögött húzódó technikát, képesek lesznek más típusú grafikonokat is rajzolni, például ágazati és oszlopdiagramokat. Ha meg szeretné tudni, hogyan lehet lineáris diagramot készíteni, nézze meg a DirectedGraphXYPlotter osztályt. amit e cikkhez írtam. (lásd a cikkhez csatolt forráskódban a \ src \ GraFix \ Plotters \ DirectedGraphXYPlotter.java fájlokat).

5. lépés: Hozzon létre saját X-Y diagram készítőjét

Az X-Y grafikontervezőnek képesnek kell lennie arra, hogy bármilyen vonalat rajzoljon egy 2-D síkra. Minden vonalnak grafikusan meg kell mutatnia a szekvenciájának minden egyes pontját az X tengelyre és az Y tengelyre való hivatkozással, és minden egyes pontot a sor következő sorához kell kötni. Létrehozhat egy ilyen készítőt a Draw2D grafikus primitívek segítségével, amelyek egy pontot és egy vonalat képviselnek. Például egy pont ábrázolásához létrehoztam a Dot primitívet az Ellipszis primitívjének kibővítésével, és PolylineConnection-t használtam a törzsek megjelenítésére.

A DirectedGraphXYPlotter osztály csak két funkcióval rendelkezik a nyilvános hozzáférési specifikációval: setData (ArrayList seriesData) és plot (). A setData (ArrayList seriesData) függvény grafikusan vizualizálni fogja az adatokat (lásd az 1. lépést), és a plot () függvény elkezdi rajzolni a grafikont.

Miután hívta a plot () függvényt, a következő műveleteket egymás után kell elvégeznie:

1. Vegyük az SWT Composite-t, és tegyük fel az FigureCanvas-ot. Ezután helyezzen el egy általános primitív tartályt a vászonra, például a panelre.
2. Sorolja fel a grafikonok ábrázolásához szükséges szekvenciák számát, és töltse ki a NodeLists és EdgeLists szükséges számú számát a DirectedGraphok létrehozásához.
3. Húzza az X és Y tengelyeket a panel primitívjére. (Lásd. XRulerBar.java YRulerBar.java fájlokat a \ src \ GRAFIX \ ábrán kapcsolódik a forrás cikket).
4. Hozzon létre annyi DirectedGraphot. hány szekvenciák vannak rajzoláshoz.
5. Rajzold be a pontokat és a törzseket a panel primitívjébe, és kapd meg a gráf adatokat a DirectedGraph-ból. létrehozva a d lépésben.
6. Végül telepítse a vászon tartalmát olyan panelprimitív segítségével, amely tartalmazza az összes elkészített pontot és törzsét.

Az alábbi kóddal:

• A 6-11 sorok megfelelnek az a) lépésben.
• A 14. sor, a függvény populateNodesAndEdges (). megegyezik a b lépéssel.
• A 16. sor, a drawAxis () függvény, megfelel a c lépésben.
• A 17., 18. és 19. sorok megfelelnek a d és e lépéseknek.
• A 20. sor megfelel az f lépésének.

Listázás 4. A plot () függvény

Két fontos belső függvényt hívunk a plot-ban (). populateNodesAndEdges () és drawDotsAndConnections () segít a rajzpontokban. Mielőtt tudná, hogy pontosan milyen funkciók vannak, fontolja meg a DirectedGraph-ot.

Mi a DirectedGraph? Grafikon rajzolásához a Draw2D-ben először létre kell hoznia egy grafikont, hogy meghatározza a rajzolni kívánt pontokat és vonalakat. Miután létrehozta ezt a táblázatot, később felhasználhatja a vázrajz rajzolására szolgáló primitívek tényleges elindítását. A DirectedGraphot kétdimenziós grafikákká teheti, amelyek véges számú csomóelemet tartalmaznak; minden egyes csomóelem egy ponton (pont) van; a szomszédos csomópontok az Edges elemekhez kapcsolódnak egymáshoz (vagy csatlakoznak egymáshoz).

Megértheti a DirectedGraph létrehozásának titkát az alábbi kódsorok használatával. Először is hozzon létre egy listát a csomópontokról és az Edges elemek listájáról. Ezután hozzon létre egy új DirectedGraph-ot, és tagjai (csomópontok és szegélyek) adja meg az újonnan létrehozott NodeList és EdgeList listákat. A GraphVisitor használatával hivatkozhat erre a DirectedGraphra. Az egyszerűség kedvéért az org.eclipse.draw2d.internal.graph csomag a GraphVisitor számos implementációját tartalmazza. amelyek már rendelkeznek speciális algoritmusokkal a grafika eléréséhez.

Tehát a DirectedGraph engedélyezésének kódja a következő lehet:

5. felsorolás Példa a DirectedGraph

Most, hogy tudod, hogy a DirectedGraph tartalmaz egy listát a csomópontokról. amelyben minden csomópont bizonyos adatokat tárol és tárolja az X és Y koordinátáikat, valamint az Edges elemek listáját. amelyben mindegyik Edge mindkét végén két Node elemet ismersz, akkor ezt az információt grafikonokat rajzolhatja a következő két részből álló technikával:

A. rész - Csomópontok és szegélyek kitöltése:

• NodeList létrehozása. amely a csomópontonként egy csomópontot tartalmaz. Például négy csomópontot kell létrehozni egy készlethez.
• Keresse meg az egyes elemek X és Y koordinátáit, és tárolja azokat a node.x és a node.y tagok példányváltozóiból.
• EdgeList létrehozása. amely az élek n-1 elemeit tartalmazza. ahol n a készletben szereplő elemek száma. Például létre kell hoznia három szegetet egy készlethez.
• Csomópont utasítások mindegyik Edge bal és jobb szélén, valamint a peremváltozók beállításának beállítása edge.start és edge.end.

B. rész - A csomópontok és élek által bemutatott grafikus primitívek:

• Az egyes csomópontok által képviselt Dot primitív rajzolása.
• Az egyes Edge által képviselt PolylineConnection primitív rajzolása.
• Csatlakoztasson minden PolylineConnection primitívet a Dot primitívumokhoz balra és jobbra.

Most térjünk vissza a belső funkciókhoz:

• A populateNodesAndEdges () függvény végrehajtja a szóban forgó módszer A. részét, és a drawDotsAndConnections () végrehajtja a B. részt.
• A populateNodesAndEdges () függvény számolja ki a grafikonon megjelenő szekvenciák számát. Az egyes sorozatokhoz egy NodeList és egy EdgeList tartozik.
• Minden NodeList egy adott sorozathoz tartozó csomópontok listáját tartalmazza. Minden egyes csomópont az X és Y koordinátákkal kapcsolatos információkat tárolja, a getXCoordinates () és getYCoordinates () függvények pedig megkapják az X és Y koordináták értékét. Ezek a funkciók a 2. lépésben ismertetett algoritmussal is skálázzák az adatokat az egyik tartományról a másikra.
• Minden EdgeList tartalmaz egy listát az élek számára egy adott sorozathoz. Minden szegély tartalmaz egy csomópontot a bal oldalon és egy másik csomópontot a jobb oldalon.

Listázás 6. A populateNodesAndEdges () függvény

Miután a funkció populateNodesAndEdges () végzi a munkáját a teremtés és NodeLists EdgeLists minden szekvenciák egy másik funkció drawDotsAndConnections () kezd szívni grafikus primitívek Dot minden csomópont és primitívek PolylineConnection minden él.

A függvények a DotsAndConnections (), a drawNode () és a drawEdge ()

A grafikon rajzának eredménye

Ha grafikusan szeretné bemutatni az adatokat, a Draw2D egy jó eszköz. Segítségével Draw2D írásához saját Java-kód, amely elvégzi a rajz grafikonok és amely segít összpontosítani a kódot skálázás és a rajz, így Draw2D és SWT munkáját teszi és a kijelző. A grafikonok megjelenését is vezérelheti, a kívánt Draw2D grafikus primitívek használatával. A Draw2D leegyszerűsíti a rajzdiagramok és grafikonok alapművét, és minimalizálja a harmadik féltől származó eszközök függőségét.