VML rajz hogyan kezdjem group, cordsize, négyzetrács. VML rajz hogyan kezdjem group, cordsize, négyzetrács. VML rajz hogyan kezdjem group, cordsize, négyzetrács. VML rajz hogyan kezdjem group, cordsize, négyzetrács. VML rajz hogyan kezdjem group, cordsize, négyzetrács. VML rajz hogyan kezdjem group, cordsize, négyzetrács. VML rajz hogyan kezdjem group, cordsize, négyzetrács. VML rajz hogyan kezdjem group, cordsize, négyzetrács. VML rajz hogyan kezdjem group, cordsize, négyzetrács. VML rajz hogyan kezdjem group, cordsize, négyzetrács. VML rajz hogyan kezdjem group, cordsize, négyzetrács. VML rajz hogyan kezdjem group, cordsize, négyzetrács. VML rajz hogyan kezdjem group, cordsize, négyzetrács. VML rajz hogyan kezdjem group, cordsize, négyzetrács. VML rajz hogyan kezdjem group, cordsize, négyzetrács. VML rajz hogyan kezdjem group, cordsize, négyzetrács. VML rajz hogyan kezdjem group, cordsize, négyzetrács. VML rajz hogyan kezdjem group, cordsize, négyzetrács. VML rajz hogyan kezdjem group, cordsize, négyzetrács. VML rajz hogyan kezdjem group, cordsize, négyzetrács. VML rajz hogyan kezdjem group, cordsize, négyzetrács.

Alakzatok rajzolásakor, koordinátapontokat kell megadni.
Minden koordinátapont kettő értékből áll össze, a következő sorrendben: left és top vagy margin-left és margin-top

Koordináta értékek meghatározásához több lehetőségünk is van:

Első:

• Vegyünk elő egy négyzetrácsos lapot (közismerten, kockás füzetlap)
• A négyzetrácsok méretei skálázzuk be. Például: egy négyzetrács legyen 10x10px
• Készítsük el a rajzunkat, majd olvassuk le a vonal kezdő és záró koordináta pontjait
• Ha ezzel megvagyunk, írjuk be a koordináta értékeket programunkba.

Második:

• Papír-írószer boltban, vegyünk négyzetrácsos mm-es lapot
• Egy négyzetrács mérete legyen 1x1px
• Készítsük el a rajzunkat, majd olvassuk le a vonal kezdő és záró koordináta pontjait
• Ha ezzel megvagyunk, írjuk be a koordináta értékeket programunkba.

Harmadik:

• Készítsünk magunk, a saját számítógépünkön négyzetrácsos háttérképet
• A háttérkép, tetszőleges nagyságú lehet, minél nagyobb annál jobb.
• A nagy háttérképet beilleszthetjük kisebb div szakaszba is, ekkor csak akkora négyzetrács jelenik meg, melyet a div szakasz méretei behatárolnak.
• Kezdjük meghatározni a koordináta pontokat.
• Ellenőrizzük programunkban, hogy mi jelenik meg.
• Ha nem megfelelő, a háttérképes négyzetrácsról azonnal leolvashatjuk, hogy hól kell korrigálni a koordináta pozíciókat.

Negyedik:

• Alkalmazzuk továbbra is a saját magunk készített négyzetrácsos háttérképet, a gyors korrekciók végett.
• Rajzunkat készítsük el a windows paint rajzprogramjában.
• Mozgassuk az egeret, az adott vonal kezdő pontjához, majd végpontjához.
• Az egér pillanatnyi pozícióját leolvashatjuk a paint, azaz rajzprogram jobb alsó sarkában.
• Az így meghatározott értékeket írjuk be programunkba, és ellenőrizzük, hogy mi jelenik meg.
• Ha nem megfelelő, a háttérképes négyzetrácsról azonnal leolvashatjuk, hogy hól kell korrigálni a koordináta pozíciókat.

Az általam készített négyzetrácsos háttérkép
mérete: 1600x1000 px, mely 324kb.

Ezt alkalmazom minden div szakaszhoz, azaz csak annyi jelenik meg belőle, amekkora a div szakasz mérete.
Ha a rajz elkészült, törlöm a háttérképet, azaz a négyzetrácsot, és a tiszta rajzalakzat lesz látható.
A kész rajzunkat, tetszőleges div szakaszban, táblázatban, stb. jeleníthetjük meg.

<div class="rajzlap" style="width:100px; height: 100px; border:2px solid red;"> <div class="pxracs" style="width:80px; height: 80px; border:2px solid blue;"> </div> </div>

<div class="rajzlap" style="width:200px; height: 200px; border:2px solid red;"> <div class="pxracs" style="width:180px; height: 180px; border:2px solid blue;"> </div> </div>

<div class="rajzlap" style="width:300px; height: 150px; border:2px solid red;"> <div class="pxracs" style="width:280px; height: 130px; border:2px solid blue;"> </div> </div>

A fenti háttérkép bemutatóknál az látható, hogy kettő div szakaszt alkalmazok.

• Az első div szakasz(piros keretszínnel jelölve), ez tartalmazza a háttérképet, azaz négyzetrácsot a koordinátaértékekkel együtt.
• A második div szakasz(kék keretszínnel jelölve), úgy van pozíciónálva, hogy csak a px rácsok területét foglalja magába, és ebbe kerülnek a VML meghatározások.
• E két div szakasznak köszönhetően, az alakzatrajz mindig a négyzetrácsos területen jelenik meg, és a koordinátaértékek szabadon leolvashatók.
• Az ábrákon, mindegyik div szakasz rendelkezik border, azaz keretszínnel a bemutató végett.
• Amikor a rajzalakzatot készítjük, nem kellenek a div szakaszoknak adott border, azaz keret meghatározások

---

Ha px - mérettel dolgozunk

A group, cordsize szorzója, px-es mérték esetén: 1
A coordsize értékét, állítsuk akkorára, amekkora az adott terület nagysága.
Példa:
width:100px; height:100px;" ----------> coordsize="100,100"

Egyébként:
coordsize alapméretek = "21600,21600"
Ezen alapméretek határozzák meg, a koordináta területének léptékét, azaz mértékegységét.

 

 

Vissza a lap elejére