Rotation problems

Hello all, I am new to SVG and have been working on a project for an interface design class. My project is to design a application that allows the user to tile a plane with shapes. So far my interfave has fthree fixed shapes and the ability to draw your own shape from scratch. I can also delete and copy the shapes as well as move them in a grid if it is turned on. Anyways....

My problem. I have built a buttons into the interface that allow the shapes clicked to be rotated in increments 20 degrees. I have experimented with the matrix(cox(radian), sin(radian),-sin(radian),cos(radian),0,0) and also the rotate(degrees,x,y). Both will roate my shape, but after it has been rotated the coordinate system is also rotated! When I then try to drag the shape, my drag function works with unpredicatable results to say the least. :shock: Different angles cause the movement to be different.

Is there any was to translate the entire coordinate system back the the original non-rotated x/y grid so I can move my shape after it has been rotated??

Any help would be greatly appreciated - this has me stumped, but I am far from an SVG guy! :cry:

Here is the interface - sorry the code is messy, it needs rewritten after I figure out SVG. :lol:

http://marble.sru.edu/~mrb6558/427/SVG/tiler.html

You can
1 - center your shapes at origin
2 - allow rotation on your shape around origin
3 - by drag and drop add translate in transform attribute

example
<rect x="-10" y="-10" width="20" height="20" transform="translate(50 50) rotate(20)" ..../>

You can also put shape in group if you don't want to parse transform attribute :
<g transform="translate(50 50)">
<rect x="-10" y="-10" width="20" height="20" transform="rotate(20)" ..../>
</g>

when user drag and drop shape, you modify only group parent translate
when user rotate shape, you modify only rotate in shape

Michel

See example
http://pilat.free.fr/tiling_loc/tile.svg

That is a really cool example. The way shapes are made is hard to understand in the code. They loop and add rect objects. Kind of neat.

The problem is I can't center me shapes at the origin because the I want them to appear where the user clicks when say for example the "triangle" button is depressed. Here is how I create my triangle...


function triangle(evt){
if (thingclicked){
thingclicked=false;
return
}
degrees.push(0)
events.push(" ")

X=evt.getClientX();
Y=evt.getClientY();

if (grid){
X=Math.floor(X/gridsize)*gridsize
Y=Math.floor(Y/gridsize)*gridsize
}

pathstring+=(X-50) +" "+ (Y+50) +" "+ (X) +" "+ (Y-36.6) +" "+ (X+50) +" "+ (Y+50) +" z";

newpath.setAttribute("d", pathstring);
newpath.setAttribute("fill", color());
place.setAttribute("onmousemove",null);
newpath.setAttribute("onmousedown","grab(evt,"+count+")");
count++;
first=true;
newp();
getcenter(count-1);
orgXY.push(","+centerX+","+centerY)
}


Here is the newp() function...


function newp(){
pathstring="M "
newpath = svgDocument.createElement("path");
newpath.setAttribute("id", "P"+count);
newpath.setAttribute("stroke", "black");
newpath.setAttribute("stroke-width", "1");
newpath.setAttribute("fill", "none");
newpath.setAttribute("opacity", .5);
place.appendChild(newpath);
}



This creates a shape at the mouses X and Y coordinates upon the click event. The new shapes origin is that mouse original mouse coordinate. Here is my rotate function, when the shape is roated before it is moved everything is OK, but after it is moved rotation is unpredictable. Same goes for moving after rotation.


function rotateit(U,X){
Uone=svgDocument.getElementById("P"+U);

getcenter(U) //finds center of shape and sets centerX and centerY globals to that coord

degrees[U] += X;

trans="rotate("+degrees[U]+","+centerX+","+centerY+")"
window.window.status=rotString

Uone.setAttribute("transform",trans);
}


Here is my grab and drag functions (grab sets up the drag event - it also calls rotate depending what buttons are depressed...



function grab(evt, U){
Uone=svgDocument.getElementById("P"+U);

if(erase){
delt(U);
return;
}

if(copyit){
copy(U);
return;
}

if(rotater){

rotateit(U,20)

}else if(rotatel){

rotateit(U,-20)

}else{

place.setAttribute("onmousemove", "drag('"+U+"')");
Uone.setAttribute("onmouseup", "selectIt('"+U+"')");
thingclicked=true
Uone.setAttribute("stroke-width", 2);
Uone.setAttribute("stroke", "yellow");
Upath=Uone.getAttribute("d")
}
}



and the drag function...





function drag(U){
window.window.status=evt.getClientX()+" "+evt.getClientY()
L=svgDocument.getElementById("P"+U);
place.setAttribute("onmouseup", "stopdrag("+U+")");

var matrix = Uone.getCTM();
MX=orgXY[U].split(/[,\,]/)

orgX=parseInt(MX[1])
orgY=parseInt(MX[2])

//alert("matrix.a = "+matrix.a+" matrix.b = "+matrix.b+" matrix.c = "+matrix.c+" matrix.d = "+matrix.d)


ThisX = (evt.getClientX() * matrix.a + evt.getClientY() * matrix.c)-orgX;
ThisY = (evt.getClientX() * matrix.b + evt.getClientY() * matrix.d)-orgY;

sT="translate("+(ThisX)+","+(ThisY)+")"
L.setAttribute("transform", sT);
}


I dunno - I'm going crazy with this stuff. I figured there would be an easy way to move a rotated shape, or rotate a moved shape, but I can't seem to find it. If you want to look at all my code, the page is right clickable so you can view the SVG. I was trying to rotate the shape back to it's original position, move it and re-rotate it which works great until the re-rotate part. :cry: Here is the URL...

http://marble.sru.edu/~mrb6558/427/SVG/tiler2.html

Any help would be greatly - greatly appreciated. I thought I would have solved this a long time ago. The funny part is someone who knows SVG could probably rewrite it to work in an hour. :lol: Oh well, I might work on it more this summer after it is due just for my own benefit and satisfaction. I hate turning in code that is half done.

Thanks in advance for any help!

~Matt

^^ my bad that was me. :lol: