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

getBBox with transformation

Expand Messages
  • netagisfr
    Hello, I d like to get x,y,width and height of this rectangle after its transformation but in the original coordinate system, and not in the new one etablished
    Message 1 of 2 , Oct 14, 2002
    View Source
    • 0 Attachment
      Hello,

      I'd like to get x,y,width and height of this rectangle after its
      transformation but in the original coordinate system, and not in the
      new one etablished by the transform attribute. Is it possible ?


      <?xml version="1.0" standalone="no"?>
      <svg width="200px" height="200px" viewbox="0 0 200 200">
      <g transform="translate(20,20) rotate(10,100,100)">
      <rect x="0" y="0" width="100" height="50"
      style="fill:red;stroke:black"
      onclick="alert('x='+ evt.getTarget().getBBox.x +'\ny='+evt.getTarget
      ().getBBox.y +'\nwidth='+evt.getTarget
      ().getBBox.width+'\nheight='+evt.getTarget().getBBox.height)"
      />
      </g>
      <text x="5" y="100">
      <tspan>Click on the rectangle</tspan>
      <tspan x="5" dy="15">to see getBBox results</tspan>
      </text>
      </svg>



      Thanks

      Gaëtan Gaborit
    • andre m. winter
      salut mr. svgmap! antoine quint has written a script about that oct 5th: here his answer with code: a+ andré -- Hi, ... Sure, that is what the getBBox()
      Message 2 of 2 , Oct 14, 2002
      View Source
      • 0 Attachment
        salut mr. svgmap!

        antoine quint has written a script about that oct 5th:

        here his answer with code:

        a+
        andré

        -->

        Hi,


        > Is there any way to determine the bounding rectangle for an SVG image
        > (other than browsing through all elements checking their coordinates).


        Sure, that is what the getBBox() method is for. However, getBBox() will
        only return the bouding box of your objects free of transforms. If you
        have transforms you're going to have to take care of these. I've done a
        simple script (further down) to take care of this, just call the
        Box.getBoundingBox() method with your element as a parameter and it
        will return an SVGRect with the computed transforms etc.

        Antoine

        ===========================================================

        /**
        *
        * Box
        *
        **/

        function Box () {};

        Box.getBoundingBox = function (node) {
        var matrix = this.getTransformToElement(node, svg);
        var box = node.getBBox();
        var corners = new Array();
        var point = svg.createSVGPoint();
        point.x = box.x;
        point.y = box.y;
        corners.push(point.matrixTransform(matrix));
        point.x = box.x + box.width;
        point.y = box.y;
        corners.push(point.matrixTransform(matrix));
        point.x = box.x + box.width;
        point.y = box.y + box.height;
        corners.push(point.matrixTransform(matrix));
        point.x = box.x;
        point.y = box.y + box.height;
        corners.push(point.matrixTransform(matrix));
        var minX = corners[0].x;
        var maxX = corners[0].x;
        var minY = corners[0].y;
        var maxY = corners[0].y;
        for (var i = 1; i < corners.length; i++) {
        var x = corners[i].x;
        var y = corners[i].y;
        if (x < minX) {
        minX = x;
        } else if (x > maxX) {
        maxX = x;
        }
        if (y < minY) {
        minY = y;
        } else if (y > maxY) {
        maxY = y;
        }
        }
        box.x = minX;
        box.y = minY;
        box.width = maxX - minX;
        box.height = maxY - minY;
        return box;
        };

        Box.getTransformToElement = function (node, target) {
        var ctm = node.getCTM();
        var node = node.getParentNode();
        while ( node != target ) {
        ctm = node.getCTM().multiply(ctm);
        node = node.getParentNode();
        }
        return ctm;
        }

        ===========================================================






        netagisfr wrote:
        > Hello,
        >
        > I'd like to get x,y,width and height of this rectangle after its
        > transformation but in the original coordinate system, and not in the
        > new one etablished by the transform attribute. Is it possible ?
        >
        >
        > <?xml version="1.0" standalone="no"?>
        > <svg width="200px" height="200px" viewbox="0 0 200 200">
        > <g transform="translate(20,20) rotate(10,100,100)">
        > <rect x="0" y="0" width="100" height="50"
        > style="fill:red;stroke:black"
        > onclick="alert('x='+ evt.getTarget().getBBox.x +'\ny='+evt.getTarget
        > ().getBBox.y +'\nwidth='+evt.getTarget
        > ().getBBox.width+'\nheight='+evt.getTarget().getBBox.height)"
        > />
        > </g>
        > <text x="5" y="100">
        > <tspan>Click on the rectangle</tspan>
        > <tspan x="5" dy="15">to see getBBox results</tspan>
        > </text>
        > </svg>
        >
        >
        >
        > Thanks
        >
        > Gaëtan Gaborit
        >
        >
        >
        > -----
        > To unsubscribe send a message to: svg-developers-unsubscribe@yahoogroups.com
        > -or-
        > visit http://groups.yahoo.com/group/svg-developers and click "edit my membership"
        > ----
        >
        > Your use of Yahoo! Groups is subject to http://docs.yahoo.com/info/terms/
        >
        >
      Your message has been successfully submitted and would be delivered to recipients shortly.