Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4

Thread: Rotation.

  1. #1
    TNO
    TNO is offline
    Regular Coder
    Join Date
    Apr 2005
    Posts
    213
    Thanks
    2
    Thanked 1 Time in 1 Post

    Rotation.

    An example is the fastest way to explain it:

    Code:
    <!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?

  • #2
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up Try this Universal JavaScript Image Rotator

    Try this universal rotator (code you need is in red):

    Code:
    <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>

  • #3
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    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.

    Code:
    <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/glos...imageTest.html

  • #4
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    Hi TinyScript. Nice demo!

    Quote Originally Posted by TinyScript View Post
    why does that code translate twice?
    I optimized my code by removing the second translation instruction, so

    Code:
    ctx.translate(-canvsize/2,-canvsize/2);
    	ctx.drawImage(img1, (canvsize-xsize)/2, (canvsize-ysize)/2, xsize, ysize);
    is now:
    Code:
    ctx.drawImage(img1, -xsize/2, -ysize/2, xsize, ysize);
    Thank you for your suggestion!

    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!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •