Thanx chris, When i rotate the rectangle along its center position rect.setAttribute("transform","translate("+newxpo+" "+newypo+")"+"rotate("+angel+") translate("+(newxpo*-1)+" "+(newypo*-1)+")") i want to resize it the rectangle again...i am resizing the rectangle when i click boundry of the rectangle like i set last five pix, if rectangle size is 45 i can resize it when i click between 40 to 45 when angle is zero i can resize it but when i use angle even 10 its coordinates is moved and rectangle is not resizing....... --- In svg-developers@yahoogroups.com, "Chris Peto" <svgdev@...> wrote: > > Hi, > > > > Please have a look at these functions from CGUI: > > > > /** > > @ -------------------------------------------------------------- > > @ Method: getUserCoordinate > > @ Description: gets x and y in user coordinates, i.e. when Zoomin in. > > @ Parameters: node - node for transformation > > @ x - x position from mouse > > @ y - y position from mouse > > @ Returns: CTM > > @ -------------------------------------------------------------- > > */ > > CGUI.prototype.getUserCoordinate = function(node, x, y) { > > var svgRoot = document.documentElement; > > var pan = svgRoot.currentTranslate; > > var zoom = svgRoot.currentScale; > > var CTM = this.getTransformToElement(node); > > var iCTM = CTM.inverse(); > > var worldPoint = document.documentElement.createSVGPoint(); > > > > worldPoint.x = (x - pan.x) / zoom; > > worldPoint.y = (y - pan.y) / zoom; > > > > var pt = worldPoint.matrixTransform(iCTM); > > > > return pt; > > }; > > > > /** > > @ -------------------------------------------------------------- > > @ Method: getScreenCoordinate > > @ Description: gets x and y in root coordinates, i.e. Tooltips. > > @ Parameters: node - node for transformation > > @ x - x position for svg node x > > @ y - y position for svg node y > > @ Returns: CTM > > @ -------------------------------------------------------------- > > */ > > CGUI.prototype.getScreenCoordinate = function(node, x, y) { > > var svgRoot = document.documentElement; > > var pan = svgRoot.currentTranslate; > > var zoom = svgRoot.currentScale; > > var CTM = this.getTransformToElement(node); > > var worldPoint = document.documentElement.createSVGPoint(); > > worldPoint.x = x; > > worldPoint.y = y; > > return worldPoint.matrixTransform(CTM); > > }; > > > > > > /** > > @ -------------------------------------------------------------- > > @ Method: getTransformToElement > > @ Description: gets CTM for node > > @ Parameters: node - node for transformation > > @ Returns: CTM > > @ -------------------------------------------------------------- > > */ > > CGUI.prototype.getTransformToElement = function(node) { > > var CTM = node.getCTM(); > > while ( (node = node.parentNode) != document ) { > > CTM = node.getCTM().multiply(CTM); > > } > > > > return CTM; > > }; > > > > /** > > @ -------------------------------------------------------------- > > @ Method: getOffsetToElement > > @ Description: gets x and y offsets to node, i.e Frame x any y > > @ Parameters: node - node to get offsets > > @ Returns: root based point up to node but not including > > @ -------------------------------------------------------------- > > */ > > CGUI.prototype.getOffsetToElement = function(node, stopnode) { > > var x = 0; > > var y = 0; > > > > if(!stopnode) stopnode = document.documentElement; > > while ( (node = node.parentNode) != stopnode ) { > > if(node.getTagName() == "svg") { > > x += Number(node.getAttribute("x")); > > y += Number(node.getAttribute("y")); > > } > > } > > > > var worldPoint = document.documentElement.createSVGPoint(); > > worldPoint.x = x; > > worldPoint.y = y; > > return worldPoint; > > }; > > > > /** > > @ -------------------------------------------------------------- > > @ Method: getClientToScreen > > @ Description: Builds a root relative x and y coordinate for a svg node > > @ and handles transform and scaling > > @ Parameters: node - svg node to get root offset > > @ x - x coordinate of svg node > > @ y - y coordinate of svg node > > @ Returns: point > > @ -------------------------------------------------------------- > > */ > > CGUI.prototype.getClientToScreen = function(node,x,y) { > > //get offsets of all svgs > > var pt = this.getOffsetToElement(node); > > x += pt.x; > > y += pt.y; > > > > //get translation of point > > var rootbasedPoint = this.getScreenCoordinate (node, x, y); > > return rootbasedPoint; > > }; > > > > /** > > @ -------------------------------------------------------------- > > @ Method: getPointToScreen > > @ Description: Builds a parent svg relative x and y coordinate for a svg > node > > @ and handles transform and scaling > > @ Parameters: node - svg node to get parent svg offset > > @ x - x coordinate of screen > > @ y - y coordinate of screen > > @ Returns: point > > @ -------------------------------------------------------------- > > */ > > CGUI.prototype.getScreenToClient = function(node,x,y) { > > //get offsets of all svgs > > var pt = this.getOffsetToElement(node); > > x-=pt.x; > > y-=pt.y; > > var parentPoint = this.getUserCoordinate (node, x, y); > > return parentPoint; > > }; > > > > Regards, > > Chris > > From: svg-developers@yahoogroups.com [mailto:svg-developers@yahoogroups.com] > On Behalf Of Mr Rauf > Sent: Donnerstag, 10. März 2011 07:50 > To: svg-developers@yahoogroups.com > Subject: [svg-developers] how can i resize my rectangle when rectanle is > about 90 degree angle > > > > > > All, > > I have a SVG rectangle in my application which can be stretched horizontally > by dragging the end bar (left & right) on either side of the rectangle. The > rectangle can be > > (1) resized (by stretching as per above), > > (2)dragged, > > (3)& rotated. > > Everything works fine, however, one strange experience is that when I rotate > the rectangle to a degree close to 90, & then try to resize the rectangle, > it starts stretching from the opposite border of the rectangle instead of > the original borders. > > > > > > [Non-text portions of this message have been removed] >
------------------------------------ ----- To unsubscribe send a message to: svg-developers-unsubscr...@yahoogroups.com -or- visit http://groups.yahoo.com/group/svg-developers and click "edit my membership" ----Yahoo! Groups Links <*> To visit your group on the web, go to: http://groups.yahoo.com/group/svg-developers/ <*> Your email settings: Individual Email | Traditional <*> To change settings online go to: http://groups.yahoo.com/group/svg-developers/join (Yahoo! ID required) <*> To change settings via email: svg-developers-dig...@yahoogroups.com svg-developers-fullfeatu...@yahoogroups.com <*> To unsubscribe from this group, send an email to: svg-developers-unsubscr...@yahoogroups.com <*> Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/