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/
