Loading ...
Sorry, an error occurred while loading the content.
 

Re: how can i resize my rectangle when rectanle is about 90 degree angle

Expand Messages
  • Mr Rauf
    Thanx chris, When i rotate the rectangle along its center position rect.setAttribute( transform , translate( +newxpo+ +newypo+ ) + rotate( +angel+ )
    Message 1 of 3 , Mar 10, 2011
      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]
      >
    Your message has been successfully submitted and would be delivered to recipients shortly.