[js] Matrix transformatie lukt wel maar de de deta - Softwareontwikkeling

zaterdag 26 januari 2002 20:22

Acties:

Verwijderd

Topicstarter

Kijk (ik nam dit van dhtmlcentral.com en maaakte het ,vééél, korter

)

<html>
<SCRIPT>
var deg = 0;
function fnRotation(oObj)
{
deg += 0.1;
costheta = Math.cos(deg);
sintheta = Math.sin(deg);

oObj.filters.item(0).M11 = costheta ;
oObj.filters.item(0).M12 = -sintheta ;
oObj.filters.item(0).M21 = sintheta ;
oObj.filters.item(0).M22 = costheta ;

setTimeout("fnRotation();",10);
}

</SCRIPT>

<HR ID="line"

STYLE="border:1px solid black;
position:absolute;
top:100px;
left:100px;
width:100px;
filter:progid:DXImageTransform.Microsoft.Matrix(SizingMethod = 'auto expand', FilterType='bilinear')
"
onfilterchange="fnRotation(this)"
>

</html>

Mara dit is nu het probleem, als je dit laat draaien dan is het net alsof die lijn tegen een onzichtbare muur aanbotst...

Is er iemand die weet hoe je het moet aanpassen zodat je het kan laten draaienn als de wijzers van een klok???

bedankt alvast om mij hierbij te helpen!!

Vancaeyzeele

zondag 27 januari 2002 18:58

Acties:

Verwijderd

Topicstarter

Is het soms te MOEILIJK??? hihi

Wel ik ben bezig met iemand anders om te zoeken maar dit is voorlopig het enige waar we mee voor de dag kunnen komen!

<html>
<SCRIPT>
///////////////////////////////////////////////////////////////////////////////////
// Made whit the aid of pootergeist at http://fitale.com/ --> Many thanks!!!
///////////////////////////////////////////////////////////////////////////////////
var deg = 0;
function fnRotation(oObj)
{
deg += 4;
rad = deg * Math.PI/180;

costheta = 2 * Math.cos(rad);
sintheta = 2 * Math.sin(rad);

oObj.filters.item(0).M11 = costheta ;
oObj.filters.item(0).M12 = -sintheta ;
oObj.filters.item(0).M21 = sintheta ;
oObj.filters.item(0).M22 = costheta ;

abssin = Math.abs(costheta);
abscos = Math.abs(sintheta);

ofset = 25 *(abscos+abssin-1); // de eerste getal is altijd de helpft van de zijde van het vierkant

line.style.left = 200 - (ofset);//left en top die ken je wel
line.style.top = 100 - (ofset);
setTimeout("fnRotation();",100);
}

</SCRIPT>

<DIV ID="line"

STYLE="border:1px solid black;
position:absolute;
width:50px;
HEIGHT:50PX;
filter:progid:DXImageTransform.Microsoft.Matrix(SizingMethod = 'auto expand', FilterType='bilinear')
"
onfilterchange="fnRotation(this)"
>haha</div>

</html>

Je zie dit werkt maar dan wel alleen voor vierkante objecten... Jammer hé

Da Caey

zondag 27 januari 2002 19:55

Acties:

oh,when?

...

nee hoor is niet te moeilijk..eerder te simpel

tip1: 360 graden is 4 keer 90.
tip2: verander je 0,0

het is trouwens deltax en deltay

als je er nog niet uitkomt, kijk dan eens in de source van het project van mij en Clay,
Plan Bee( geen matrixtransformaties, maar wel razendsnel)

"You're only as good, as what you did last week."