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/
