A következő cikket egy kedves felhasználónktól kaptuk – nevezzük a Titokzatos Mr. N-nek :), aki a Plant Simulation vektorgrafikus módjával szerzett tapasztalatait osztja meg velünk. Ígérete szerint ez nem az utolsó cikk a tollából 🙂

A Plant Simulation 11. verziója óta megjelent az EnergyAnalyzer, amellyel az egyes objektumok energiafelhasználásának mérését el lehet végezni és különböző formában való megjelenítéseket nyújt számunkra az egyes objektumok energiafelhasználási mértékének összehasonlítására. Ennek egyik módja a „Show Visualization”, amikor az objektum körül egy kör jelenik meg az energiafelhasználás mértékének függvényében.

Felmerült bennem a kérdés, hogyan csinálja? Más típusú objektumokra, mondjuk beágyazott Frame-ekre is lehet ilyet készíteni? Vagy ez egy olyan megoldás, amit csak a fejlesztők ismernek, és nekünk mezei felhasználóknak esélyük sincs ennek megvalósítására. Ez indukálta, hogy egy kicsit körbejárjam a témát.

Hogyan is lehet rajzolni metódusok segítségével vektorgrafikus módban?

Szerencsére az EnergyAnalyzer struktúrájának részletes elemzése vezetett a megoldáshoz, hiszen beépített alapvető rajzolásra alkalmas függvényeket használ fel. Meg kell jegyezni, hogy minden Frame-nek külön vektorgrafikus módja van, ezért a rajzolni kíván alakzat mindig egy Frame-hez kötődik majd, aminek meghatározását relatív/abszolút útvonallal adjuk meg.

Lássuk melyek ezek, mire használhatók:

1. Ellipszis rajzolása

<Path>.drawEllipse(Layer:<integer1>, X:<integer2>, Y:<integer3>, Width:<integer4>, Height:<integer5>, RGB:<integer6>, LineWidth:<integer7>);

A drawEllipse metódus egy megadott layer-e, megadott X és Y középponti koordinátákkal és Width, Height mértékű sugarú, RGB színű LineWidth vastagságú vonallal rajzol egy ellipszist. Amennyiben Width és Height méretei azonosak az ellipszisből kör lesz. A LineWidth (-1) érékével a rajzolt alakzatot a megadott színnel teljesen kitölti. Az RGB paraméter egy színkódot jelöl, amelyet a makeRGBValue(R:(0-255),G:(0-255),B:(0-255)) függvény által egy, az RGB paramétereknek megfelelő színkódot ad vissza.

A fenti ábrán három ellipszist ábrázoltam, kék (RGB:50,100,235) színel. A második ellipszist teljesen kitöltöttem (-1 vonalmérettel), míg a harmadik esetben egy speciális ellipszist (Width=Height), egy kört készítettem. A current. az aktuális Framre vonatkozik, de ez természetesen megváltoztatható, például egy objektum.Location adattagjára való hivatkozással.

De mi a titka egy objektum köré történő kör rajzolásának?

Először is meg kell határozni az objektum X és Y koordinátáit a Frame-en. Ez nem túl nehéz feladat, az objektum XPos és YPos adataira van szükség. Ez lesz az ellipszis középpontja. Az ellipszis sugara pedig az adott objektum ikonjának méretéből számítható. Ehhez lekérdezzük az objektum ikonjának méretét a .getIconSize(width, height) segítségével. A függvény a width és height változókba adja vissza az objektum ikonjának méretét. Ezek lesznek az ellipszis sugarai, ha egyenlők, akkor kört kapunk. Ahhoz, hogy a körünk pontosan az adott objektum középpontjához igazodjon használjuk az alábbi képletet, ahol az offset egy olyan plussz értéket jelent, amely az ellipszis sugarainak méretét megnöveli, annak érdekében, hogy egy kicsivel nagyobb legyen a rajzolt körünk az ikonnál. A vonalvastagság (-1) értékre való beállításával teljesen ki tudjuk tölteni a körünket a megadott színnel.

A felmerült kérdésekre pedig azt a választ kapjuk, hogy nem csak objektumok, hanem a beágyazott Frame-ek köré is lehet rajzolni különböző alakzatokat. Az ellipszis mellett más alakzatok rajzolására is lehetőség nyílik, amelyeket a következőkben tekintek át.

2. Vonal rajzolása

<Path>.drawLine(Layer:<integer1>, X1:<integer2>, Y1:<integer3>, X2:<integer4>, Y2:<integer5>, RGB:<integer6>, LineWidth:<integer7>);
<Path>.drawLine(Layer:<integer1>, X1:<integer2>, Y1:<integer3>, X2:<integer4>, Y2:<integer5>, RGB:<integer6>, LineWidth:<integer7>) [,LineSTyle:<integer8>]);

A .drawLine függvény megadott Layer-re, X1,Y1 kiindulási koordinátákkal és X2,Y2 végkoordinátákkal rendelkező, RGB színű LineWidth vonalvastagságú és opcionálisan megadható LineSTyle típusú vonalat / nyilat rajzol. Az RGB paraméter a makeRGBValue(234,50,50) által definiált színkód értékét jelenti.

A LineSTyle a következő értékeket veheti fel:

3. Négyszög rajzolása

<Path>.drawRectangle(Layer:<integer1>, X:<integer2>, Y:<integer3>, Width:<integer4>, Height:<integer5>, RGB:<integer6>, LineWidth:<integer7>);
<Path>.drawRectangle(Layer:<integer1>, X:<integer2>, Y:<integer3>, Width:<integer4>, Height:<integer5>, RGB:<integer6>, LineWidth:<integer7> [,Gradient:<integer8>]);

A .drawRectanlge egy Layer-re X,Y kezdő koordinátákból kiinduló Width szélességű és Height magasságú RGB színű LineWidth vonalvastagságú négyszöget rajzol. A Width és Height paraméterek értékeitől függően ez lehet négyzet vagy téglalap is. A LineWidth értékének (-1)-re való beállításával a téglalapot a megadott színnel teljesen kitölthetjük. Ebben az esetben a Gradient opcionális paraméter különböző értékeinek megadásával meghatározhatjuk a téglalap kitöltő színének színátmeneti irányítottságát.

A Gradient a következő értékeket veheti fel:

4. Szöveg írása

<Path>.drawText(Layer:<integer1>, X:<integer2>, Y:<integer3>, RGB:<integer4>, FontSize:<integer5>, Text:<string>);

A .drawText egy megadott Layer-re X,Y kiinduló koordinátákkal, RGB színnel FontSize (pixelben értelmezett) mérettel Text szöveget íratható ki.

5. Törlés

<Path>.eraseAllLayers
<Path>.eraseLayer(Layer:<integer>)

Ha vektorgrafikus felületen elkészített rajzelemekre nincs szükség a továbbiakban vagy újakat szeretnénk rajzolni helyettük, akkor azok eltávolítására szükség lehet. Mivel minden egyes grafikus elemet akár más-más layer-en is elhelyezhetünk lehetőségünk nyílik csupán egyetlen a .eraseLayer(Layer) függvénnyel a Layer azonosítóval ellátott layer-en elhelyezett rajzelemek teljes törlésére. Amennyiben az összes layer-en lévő összes rajzelemünket törölni szeretnénk, használjuk a .eraseAllLayers függvényt. Mindkét függvénynek meg kell adni, hogy melyik Frame vektorgrafikus ábráiról van szó. pl.: current.ereseAllLayers.

A vektorgrafikus ábrák készítésére nemcsak a 2D-s, hanem a 3D-s nézetben is lehetőség nyílik.