...

View Full Version : Rotation.



TNO
06-11-2008, 03:43 PM
An example is the fastest way to explain it:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Rotate</title>
<style type="text/css">
body{
background-color:silver;
}
img{
position:absolute;
top:200px;
left:400px;
cursor:pointer;
z-index:2;
}
#box{
border:1px solid black;
position:absolute;
top:199px;
left:399px;
width:276px;
height:110px;
z-index:1;
}
</style>
<script type="text/javascript">
function o(o){return document.getElementById(o)}

function rotate(obj,deg){
var deg2radians = Math.PI * 2 / 360;
var rad = deg * deg2radians ;
var costheta = Math.cos(rad);
var sintheta = Math.sin(rad);

obj.style.filter = "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',M11="+costheta+",M12="+(-sintheta)+",M21="+sintheta+",M22="+costheta+")";
}

var i = 0;

function run(){
if(i < 360){
i++;
rotate(o('img'),i);
window.setTimeout(run,10);
}
else{
i = 0;
}
}

</script>
</head>
<body>
<div id="box"></div>
<img id="img" src="http://www.google.com/intl/en_ALL/images/logo.gif" onclick="run()" alt="" />
</body>
</html>



Do you have any suggestions on how to rotate around the center of the image instead of in the box-like method?

niente
03-15-2009, 10:47 PM
Try this universal rotator (code you need is in red):


<html>
<head>
<!--
**** Universal JavaScript Image Rotator v1.0 (15-03-2009)
//-->

<script type="text/javascript">
<!--
//******************** Image parameters *******************
imagename='example.jpg'
xsize=200
ysize=100
//*********** nothing to configure below this line ********
//-->
</script>

</head>
<body style="margin:20px">
<H1>Universal JavaScript Image Rotator v1.0 (14-03-2009)</H1>
<div id="container" style="overflow:hidden">

<script type="text/javascript">
<!--
canvsize=Math.round(Math.sqrt(xsize*xsize+ysize*ysize)); //I need a square canvas for complete rotation
document.write('<canvas id=canvas width='+canvsize+' height='+canvsize+'></canvas>')
document.write('<div id="canvas2"><img id=im width='+xsize+' height='+ysize+'></div>')
//-->
</script>

<script type="text/javascript">
<!--
ie=0
var browser=navigator.appName;
if (browser=='Microsoft Internet Explorer') ie=1;

document.getElementById("container").style.width=canvsize+'px'
document.getElementById("container").style.height=canvsize+'px'
//document.getElementById("canvas").style.width=canvsize+'px'
//document.getElementById("canvas").style.height=canvsize+'px'
document.getElementById("canvas2").style.width=xsize+'px'
document.getElementById("canvas2").style.height=ysize+'px'
document.getElementById("canvas2").style.marginLeft=(canvsize-xsize)/2+'px'
document.getElementById("canvas2").style.marginTop=(canvsize-ysize)/2+'px'

var browser=navigator.appName;
if (ie==1) {
document.getElementById('im').src=imagename;
var canvas2=document.getElementById('canvas2');
canvas2.style.filter="progid:DXImageTransform.Microsoft.Matrix(M11='1.0', sizingmethod='auto expand')";
}
else {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var img1 = new Image();
img1.src = imagename;
img1.onload=function() { ctx.drawImage(img1, (canvsize-xsize)/2, (canvsize-ysize)/2, xsize, ysize);}
}

function rotate(deg){
rad = deg*Math.PI/180
if (ie==1) rotate_ie(rad,deg)
else rotate_ff(rad)
}

function rotate_ff(rad) {
ctx.clearRect(0,0,canvsize,canvsize);
ctx.save();
ctx.translate(canvsize/2,canvsize/2);
ctx.rotate(rad);
ctx.translate(-canvsize/2,-canvsize/2);
ctx.drawImage(img1, (canvsize-xsize)/2, (canvsize-ysize)/2, xsize, ysize);
ctx.restore();
}

function rotate_ie(rad)
{
canvas2.filters.item(0).M11 = Math.cos(rad);
canvas2.filters.item(0).M12 = -Math.sin(rad);
canvas2.filters.item(0).M21 = Math.sin(rad);
canvas2.filters.item(0).M22 = Math.cos(rad);
canvas2.style.marginLeft=((canvsize-canvas2.offsetWidth)/2)+'px'
canvas2.style.marginTop=((canvsize-canvas2.offsetHeight)/2)+'px'
}
//-->
</script>
</div>

<p>
Enter the number of degrees (positive or negative) you want to rotate the image:<BR>
<input type="text" id="rotation">
<input type="button" value="Rotate" onclick="rotate(document.getElementById('rotation').value);">
</p>


</body>
</html>

TinyScript
03-15-2009, 11:34 PM
why does that code translate twice?

Here's my testing script. Canvas only, sorry. I need to adapt it to IE. Do you think I could use some of the code above, niente? I have zero experience with IE. I simply hate it. I hate the clicking it does. I never even open it. So as a result, it would be like relearning everything.



<html>
<head>
<title>Canvas tutorial</title>
<script type="text/javascript">
i =0;
function draw(){


var img = new Image();
img.src = 'http://www.codingforums.com/img/logo.gif';
var xloc=200;
var yloc=200;

img.onload = function(){

var canvas = document.getElementById('tutorial');
if (canvas.getContext){
ctx = canvas.getContext('2d');
ctx.save()
ctx.clearRect(0,0,750,750); // clear canvas


//ctx.setTransform(-.5,.35,-1,.25,250,img.width*.5)

ctx.translate(xloc+img.width/2,yloc+img.height/2) ;
ctx.rotate(Math.PI*2*(i/360)*10 )
ctx.scale(.75,.75)
ctx.drawImage(img,img.width*-.5,img.height*-.5);
ctx.restore();
ctx.drawImage(img,75,75);
ctx.save()
//ctx.setTransform(-.5,.5,-1,.01,550,img.width*.55)
ctx.rotate(Math.PI*2*(i/360))
//ctx.scale(1-(Math.cos(Math.PI*2*(i/360))*.95),1-(Math.cos(Math.PI*2*(i/360))*.95))
ctx.scale(1.25,1.25)
ctx.drawImage(img,img.width*-.5,250);
ctx.restore();



}
}
i+=2;
if (i==360)i=i%360
setTimeout(draw,50);
}



</script>
<style type="text/css">
canvas { border: 1px solid black; }
</style>
</head>
<body onload="draw()">
<canvas id="tutorial" width="750" height="750"></canvas>

</body>
</html>



here's a link.
http://h1.ripway.com/tinyscript/glossycanvas/newimageTest.html

niente
03-16-2009, 09:29 PM
Hi TinyScript. Nice demo!


why does that code translate twice?

I optimized my code by removing the second translation instruction, so


ctx.translate(-canvsize/2,-canvsize/2);
ctx.drawImage(img1, (canvsize-xsize)/2, (canvsize-ysize)/2, xsize, ysize);

is now:

ctx.drawImage(img1, -xsize/2, -ysize/2, xsize, ysize);

Thank you for your suggestion! :thumbsup:

The rotation instructions on IE are completely different, because it still doesn't support the "CANVAS" tag, so you have to recall an ActiveX function (that works quite well and supports even the rotation of text!).
As you can see from my example, code is quite simple, I think you can easily adapt your script to IE too.

Happy coding! :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum