Weblap Hová jutunk?

Vonalak körforgása, felező pontjuknál 3426

 

 

 

 

 

 

 

 

Mozillában nem működik.

Vonal hosszát, JavaScript programban a width-nek adott értékkel állítjuk be.

Vonal megjelenítést, úgy képzeljük magunk elé, min a div szakasznak adott a width érték esetén meghatározott border-top esetében történne. (Egyetlen vízszintes vonal jelenik meg)
Ha a div szakasznak meghatározott width értéket fokozatosan növeljük, akkor változó hosszúságú vonalat kapunk.
A vonal hosszával arányosan, jobbra tolódik a vonal felezőpontja (programunkban a kör központja).
El is kezdhetnénk rajzolni, de, az eltérő hosszúságú vonalak felezőpontja, más és más pozícióban található, így igen bonyolult lenne az egyes vonalak pozícióját meghatározni, hogy azok, egy műszaki rajz formátumot jelenítsenek meg.
Rajzolás megkönnyítése érdekében, úgy kell a vonalakat megjeleníteni, hogy az összes megjelenítendő vonal felezőpontja, egy általunk meghatározott pontban jelenjen meg.
Ha minden vonal felezőpontja egy adott pontban jelenik meg, akkor könnyedén meghatározhatjuk a végleges megjelenési hely pozícióját.

A lenti példában, "K1" azon kör azonosítója, melynek központjához igazítjuk a második kör központját.
A kör ármérője, egyenlő a megjelenő vonal hosszával (width értékével)
Kérdezhetnénk, mért beszélünk körről, mikor vonalakat jelenítünk meg?
Ha a megjelenő vonal végére egy ceruzát erősítenénk, és a vonalat 360-fokig fokozatosan elforgatnánk, akkor az egy kört rajzolna.

Vonalak felezőpontjának azonos pozícióba rendezése

Példa képlet:

A kör ármérője, egyenlő a megjelenő vonal hosszával (width értékével)

TOP érték: TY=100; Ezen érték, minden körnél megegyezik, azaz álandó érték
Kör "egy" átmérő: k1=250; Sugara=125; Központi pozíció, X1: left=125
Kör "kettő" átmérő: k2=150; Sugara=75; Központi pozíció, X2: left=75

Ha a nagyobbik kör "k1" központjához (125) pozícionáljuk, a kisebbik kör "k2" központját:
(k1-k2)/2=Z k2 Left: Lx= (Z+X2)
k2 pozíciója X tengelyen (LEFT), azaz vízszintesen: 250-150=100; 100/2=Z (50)
k2 left értéke: Z+X2=125

Ha a kisebbik kör "k2" központjához (75) pozícionáljuk, a nagyobbik kör "k1" központját:
(k2-k1)/2=-Z k2 Left: Lx= (-Z+X1)
k2 pozíciója X tengelyen (LEFT), azaz vízszintesen: 150-250=-100; -100/2= -Z (-50)
k2 left értéke: -Z+X1=75

Készítünk két tömböt:
- első tömb, mely tárolja 1-től 1000-ig a width értékeket, azaz kör átmérőket( átmérő=vonal hossza)
- második, mely tárolja 1-től 1000-ig a left, azaz X pozíciokat, hogy minden kör központja, left=100px pozícióban legyen. (Azért 100px értéket választunk, mert így a vonalak valós helyzetének pozícióját, könnyen kiszámolhatjuk, és kezdetben, minden vonal jól látható a monitoron.

Első tömbünk: ( wh=width=vonal hossza, azaz a kör átmérője, melyben a vonal körbeforgatható )
var wh= new Array();
for (i=1; i < 1001; i++ ) {
wh[i] = i; // ez küldi "i" értékét, mely megegyezik a vonal hosszával, minden lefutás után, a tömbbe
}

Második tömbünk
var FK=200; // FK : FIX Kör. Azon kör átmérője, melynek központjához igazítunk minden más kört
var Y=100; // Y : Top; top=100px, Y koordináta értéke, minden körnél azonos
var X=0; // X : LeftX; FIX Kör pozíciója, left=100px, azaz X koordináta értékével

var Lx= new Array(); // Lx= left pozíció az X koordinátán
for (i=1; i < 1001; i++ ) {
VSZ=i-1; // VSZ= Vonalak sorszáma a wh tömbben. (sorszámok "0"-val kezdődnek)
Z=(FK-wh[VSZ])/2;
Lx[i] = Z+X; // ez küldi az adott vonal (kör) left értékét minden lefutás után, a tömbbe
}

Megjegyzés:
Ha alaphelyzetben, ugyan azon fokban és hosszban akarunk tetszőleges számú vonalat megjeleníteni, akkor az utoljára beírt vonal kerül felülre, és ez eltakarja a többi vonalat, azaz csak ez az egy vonal fog látszani.

CSS, azaz stílus fájl

.pabsolut3424 {position: absolute; width: 700px; height: 280px; margin-top: 15px; margin-left: 50px; border: 1px solid black;)
vv { background-color: #ccc;}

#vP3424000, #vP3424090, #vP3424180, #vP3424270, #vP3424360 {position:absolute;}

/*Elforgatandó vonalak*/
#vPm3424000, #vPm3424090, #vPm3424180, #vPm3424270, #vPm3424360 {position:absolute;}

HTML fájl

<!-- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> -->
<html xmlns="http://www.w3.org/1999/xhtml">

<head> <title> Fotó minőségű vonalak </title>
<script type="text/javascript" language="javascript1.2" src="elérési út.js"> </script>

<xml:namespace nos="urn:schemas-microsoft-com:vml" prefix="vv" />
<object id="VMLVonalak" codebase="vgx.dll" classid="CLSID:10072CEC-8CC1-11D1-986E-00A0C955B42E"> </object>
<style> <!-- vv\:* { behavior: url(#VMLVonalak); } --> </style>

<link href="elérési út.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="pabsolut3424">
<vv:line id="vP3424000" to="1"> <vv:stroke weight="3px" color="red"/> </vv:line>
<vv:line id="vP3424090" to="1"> <vv:stroke weight="3px" color="black"/> </vv:line>
<vv:line id="vP3424270" to="1"> <vv:stroke weight="3px" color="olive"/> </vv:line>
<vv:line id="vP3424360" to="1"> <vv:stroke weight="3px" color="yellow"/> </vv:line>

<!--Elforgatandó vonalak-->
<vv:line id="vPm3424000" to="1"> <vv:stroke weight="3px" color="red"/> </vv:line>
<vv:line id="vPm3424090" to="1"> <vv:stroke weight="3px" color="black"/> </vv:line>
<vv:line id="vPm3424270" to="1"> <vv:stroke weight="3px" color="olive"/> </vv:line>
<vv:line id="vPm3424360" to="1"> <vv:stroke weight="3px" color="yellow"/> </vv:line>

</div>
<p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p>
</body>

JavaScript fájl

var FK=200; //FK : FIX Kör. Azon kör átmérője, melynek központjához igazítunk minden más kört
//Abban az esetben, ha a FIX Kör átmérője 200; Alaphelyzet,központi pozíció = 200/2 = 100; (left=100; top=100; azaz Y=100; X=100;)
//Az "Y" értéke, minden körnél azonos. Ha top, azaz Y=0, akkor az egyenlő alaphelyzet központi értékével
var Y=100; //Az alaphelyzet top, azaz"Y" értékét, most 100px-el megnöveljük. (alaphelyzet_top+100=200)
var X=0; //X : FIX Kör pozíciója:(200/2)+X; left=100px, azaz X koordináta alaphelyzete

//Első tömbünk: ( wh= width; vonal hossza, azaz a kör átmérője, melyben a vonal körbeforgatható )
var wh= new Array();
for (i=1; i < 1001; i++ ) {
wh[i] = i; // ez küldi "i" értékét minden lefutás után, a "wh" tömbbe
}

//Második tömbünk
var Lx= new Array(); // Lx: azon tömb, mely tárolja az éppen aktuális vonalhoz tartozó left értéket
for (i=1; i < 1001; i++ ) {
VSZ=i-1; // VSZ= Vonalak sorszáma a wh tömbben. (sorszámok "0"-val kezdődnek)
Z=(FK-wh[VSZ])/2;
Lx[i] = Z+X; // ez küldi az adott vonalhoz tartozó left, azaz "X" értékét minden lefutás után, a tömbbe
}

var mv=300; // Mozgási animáció, azaz mozgo vonalak pozíciója, a fix vonalaktól
var em=0; // elmozdulási fok, a mozgási animációnál.

//A vonalak megjelenítése úgy, hogy felezőpontjuk, egy adott pontban legyen
//Minden vonalnál, az Lx[...] és a wh[...] értékeknek meg kell egyezniük
//A vonalak végleges pozícióba helyezéséhez, "0" helyére kell beírni a megfelelő értéket
// rotation értéke határozza meg, hogy a vonal, milyen fokban (szögben) jelenjen meg.

function VonalakPozicioja() {
vP3424000.style.rotation =0; vP3424000.style.top=Y+0; vP3424000.style.left=Lx[150]+0; vP3424000.style.width=wh[150];
vP3424090.style.rotation =45; vP3424090.style.top=Y+0; vP3424090.style.left=Lx[100]+0; vP3424090.style.width=wh[100];
vP3424270.style.rotation =135; vP3424270.style.top=Y+0; vP3424270.style.left=Lx[100]+0; vP3424270.style.width=wh[100];
vP3424360.style.rotation =270; vP3424360.style.top=Y+0; vP3424360.style.left=Lx[150]+0; vP3424360.style.width=wh[150];

//Azon vonalak, melyek a mozgási animációt szemléltetik
if(em < 361){
vPm3424000.style.rotation =0+em; vPm3424000.style.top=Y; vPm3424000.style.left=mv+Lx[150]; vPm3424000.style.width=wh[150];
vPm3424090.style.rotation =45+em; vPm3424090.style.top=Y; vPm3424090.style.left=mv+Lx[100]; vPm3424090.style.width=wh[100];
vPm3424270.style.rotation =135+em; vPm3424270.style.top=Y; vPm3424270.style.left=mv+Lx[100]; vPm3424270.style.width=wh[100];
vPm3424360.style.rotation =270+em; vPm3424360.style.top=Y; vPm3424360.style.left=mv+Lx[150]; vPm3424360.style.width=wh[150];
em++;
}
else em=0;

window.setTimeout("VonalakPozicioja(); " , 100) ;
}

if (document.all && window.print) { window.attachEvent("onload",VonalakPozicioja);}