javascript - transform-origin properties changed several time -
i need able scale div several times possibility alter origin.
please have @ : http://jsfiddle.net/croydufixe/vdxm7/ (see total code below)
when fiddle run, grayness square shown grid of reddish lines dividing square in 4 x 4 .
a reddish mark positioned "origin" of next transform.
on top of frame can see 2 buttons '+' , '-' scale grayness square factor increased (or decreased) 0.5
now, please utilize next steps :
click + button : grayness square scaled 1+0.5 using reddish mark origin reposition reddish mark clicking 25% 25% of grayness square click + button 1 time again : grayness square scaled (1+0.5+0.5) but origin of scale top left corner of grayness square not reddish mark clik '+' 1 time again : grayness square scaled (1+0.5+0.5+0.5) using reddish mark origini not understand origin used @ step 3 (top/left , not 25%/25%)
thank help.
full code :
<head> <title></title> <script> var lastscale=1; var originmodified = false; function drawcanvas() { var canevas=document.getelementbyid("canvas"); var ctx = canevas.getcontext("2d"); var e=document.getelementbyid("canvas"); var largeur = e.offsetwidth; var hauteur = e.offsetheight; for( var x=0; x<largeur; x+=largeur/4 ) { ctx.moveto( x, 0 ); ctx.lineto( x, hauteur ); } for( var y=0; y<hauteur; y+=hauteur/4 ) { ctx.moveto( 0, y ); ctx.lineto( largeur, y ); } ctx.strokestyle = '#ff0000'; ctx.stroke(); } function init( ) { lastscale=1; originmodified=false; var e = document.getelementbyid( "origin" ); } function incrementalscale( increment ) { var e=document.getelementbyid("a"); var eorigin = document.getelementbyid("origin"); // var targetoriginx = eorigin.offsetleft; var targetoriginy = eorigin.offsettop; e.style.transformorigin = targetoriginx + "px " + targetoriginy + "px 0px"; lastscale += increment; var transform = "scale(" + lastscale + ")"; e.style.transform = transform; originmodified = false; } function setorigin(event) { if( originmodified ) { alert( 'origin modified : please scale'); return; } var eorigin=document.getelementbyid("origin"); var ee = document.getelementbyid("a"); var deltax = eorigin.offsetleft - ( event.clientx - ee.offsetleft ); eorigin.style.left = ( eorigin.offsetleft - deltax / lastscale ) + "px"; var deltay = eorigin.offsettop - ( event.clienty - ee.offsettop ); eorigin.style.top = ( eorigin.offsettop - deltay / lastscale ) + "px"; originmodified = true; } </script> </head> <body onload="drawcanvas();init();"> <div> scale <input type="button" onclick="incrementalscale(+0.5)" value="+"> <input type="button" onclick="incrementalscale(-0.5)" value="-"> </div> <div id="a" style="position:relative;top:400px;left:400px;border:1 px solid red;background-color:#ddd;width:200px;height:200px" onmousedown="setorigin(event);"> <canvas id="canvas" width="200px" height="200px"></canvas> <div id="origin" style="position:absolute;top:100px;left:100px;width:5px;height:5px;background-color:red"> </div> </div> </body> javascript css transform scaletransform css-transforms
No comments:
Post a Comment