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

Re: Scripting Issue - Handling Scale

Expand Messages
  • tjt1231
    Thanks again. I really appreciate it. TJ ... the ... its ... that ... work ... ... ) ... +) ... +) ... + ... evt ) ... evt ) ...
    Message 1 of 5 , May 29, 2004
      Thanks again. I really appreciate it.

      TJ

      --- In svg-developers@yahoogroups.com, "lestat_24" <lestat_24@l...>
      wrote:
      > Ok, that very easy to explain:
      >
      > As you must have understood, the rotate attribute accepts 3
      arguments:
      > the angle of rotation and two (optional) coordinates cx and cy of
      the
      > center of the rotation. You want your rectangle to rotate around
      its
      > center, so you need to find this point.
      > cx = yourRect.x + yourRect.width/2 = 225 + 100/2 = 275;
      > cy = yourRect.y + yourRect.height/2 = 225 + 100/2 = 275;
      >
      > Regards
      >
      > Christophe
      >
      >
      > -----Original Message-----
      > From: tjt1231 [mailto:tjt1231@h...]
      > Sent: samedi 29 mai 2004 04:27
      > To: svg-developers@yahoogroups.com
      > Subject: [svg-developers] Re: Scripting Issue - Handling Scale
      >
      > Thank you so much Christophe. I think I understand everything
      that
      > is going on there, but I have one question. How did you come up
      > with the 275 figure for rotating, for example rotate(45 275 275).
      >
      > That was the piece the puzzle I was missing when trying to do this
      > on my own. My guess is that is what makes the drag continue to
      work
      > properly. I am just curious how you came up with that.
      >
      > Thanks again,
      > TJ
      >
      >
      > --- In svg-developers@yahoogroups.com, "lestat_24"
      <lestat_24@l...>
      > wrote:
      > > Hi TJ,
      > >
      > >
      > > Your problem occurs because the script uses a regular expression
      > that
      > > doesn't accept decimal values. It looks for digital chars
      > with "\d" but
      > > it doesn't take "." into account.
      > >
      > > Try to change the line :
      > > var translateRegExp=/translate\(([-+]?\d+)(\s*[\s,]\s*)([-+]?\d+)
      \)
      > \s*$/
      > >
      > > to :
      > > var
      > > translateRegExp=/translate\(([-+]?[\d.]+)(\s*[\s,]\s*)([-+]?[\d.]
      +)
      > \)\s*
      > > $/
      > >
      > >
      > >
      > > About the rotation of the rectangle, try this:
      > >
      > > <?xml version="1.0" encoding="iso-8859-1"?>
      > > <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
      > > "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
      > > <svg id="root" xmlns="http://www.w3.org/2000/svg" version="1.0">
      > > <title>No title</title>
      > > <script><![CDATA[
      > >
      > > var dragger = null;
      > > var origTransform = "";
      > > var origX;
      > > var origY;
      > > var oldTranslateX;
      > > var oldTranslateY;
      > > var
      > > translateRegExp=/translate\(([-+]?[\d.]+)(\s*[\s,]\s*)([-+]?[\d.]
      +)
      > \).*$
      > > /
      > > var scale;
      > > var alpha=45;
      > >
      > > function DoOnMouseOver(evt)
      > > {
      > > }
      > >
      > > function DoOnMouseOut(evt)
      > > {
      > > }
      > >
      > > function DoOnLoad(evt)
      > > {
      > > }
      > > function DoOnMouseDown(evt)
      > > {
      > >
      > > var onObject = evt.getTarget();
      > > setScale(evt)
      > >
      > > if(onObject.getAttribute("id") == "willDrag")
      > > {
      > > dragger = onObject;
      > > origTransform =
      > > dragger.getAttribute("transform");
      > > if (origTransform == null)
      > > origTransform = "";
      > > else
      > > origTransform = new
      > > String(origTransform);
      > > origX = evt.getClientX();
      > > origY = evt.getClientY();
      > > oldTranslateX = 0;
      > > oldTranslateY = 0;
      > > if (origTransform == null ||
      > > origTransform.length == 0)
      > > origTransform = "";
      > > else
      > > {
      > > var result =
      > > origTransform.match(translateRegExp);
      > >
      > > if (result == null ||
      > > result.index == -1)
      > > {
      > > alert("The regular
      > > expression had a problem finding the translate at the end of \""
      +
      > > origTransform + "\"");
      > > oldTranslateX = 0;
      > > oldTranslateY = 0;
      > > }
      > > else
      > > {
      > > oldTranslateX =
      > > parseFloat(result[1]);
      > > oldTranslateY =
      > > parseFloat(result[3]);
      > > origTransform =
      > > origTransform.substr(0, result.index);
      > >
      > > }
      > > origTransform += " ";
      > >
      > > }
      > > }
      > > }
      > > function DoOnMouseUp(evt)
      > > {
      > > if( dragger != null )
      > > {
      > > dragger = null;
      > > origTransform = ""
      > > origX = 0;
      > > origY = 0;
      > > oldTranslateX = 0;
      > > oldTranslateY = 0;
      > > }
      > > }
      > > function DoOnMouseMove(evt)
      > > {
      > > if( dragger != null )
      > > {
      > > var newX = oldTranslateX +
      > > (evt.getClientX() - origX)/scale;
      > > var newY = oldTranslateY +
      > > (evt.getClientY() - origY)/scale;
      > > alpha++;
      > > var transform = origTransform +
      > > "translate(" + newX + " " + newY + ") rotate(" + alpha + " 275
      > 275)";
      > >
      > >
      > > dragger.setAttribute("transform",
      > > transform );
      > > }
      > > }
      > > function setScale(evt)
      > > {
      > > svgdoc=evt.target.ownerDocument;
      > > var root=svgdoc.getElementById("root");
      > > scale=root.currentScale;
      > > }
      > > var svgdoc;
      > > ]]></script>
      > > <g id="dragGroup" onmouseover="DoOnMouseOver( evt )"
      > > onmouseout="DoOnMouseOut( evt )" onmousedown="DoOnMouseDown(
      evt )"
      > > onmouseup="DoOnMouseUp( evt )" onmousemove="DoOnMouseMove(
      evt )" >
      > >
      > > <rect id="bg" x="0" y="0" width="100%" height="100%"
      > > style="visibility:visible; fill-opacity: 0"/>
      > > <rect x="225" y="225" width="100" height="100" id="willDrag"
      > > fill="red" fill-opacity=".5" transform="translate(0 0) rotate(45
      > 275
      > > 275)"/>
      > >
      > > </g>
      > > <line x1="0" y1="-500" x2="0" y2="500" />
      > > <line x1="-500" y1="0" x2="500" y2="0" />
      > >
      > > <rect stroke="black" fill="none" y="313px" x="243px"
      > width="271px"
      > > height="251px"/>
      > > <rect stroke="black" fill="none" y="321px" x="251px"
      > width="256px"
      > > height="236px"/>
      > > <rect stroke="black" fill="none" y="89px" x="85px"
      width="295px"
      > > height="223px"/>
      > > <rect stroke="black" fill="none" y="100px" x="96px"
      width="274px"
      > > height="203px"/>
      > > <rect stroke="black" fill="none" y="90px" x="381px"
      width="292px"
      > > height="222px"/>
      > > <rect stroke="black" fill="none" y="99px" x="391px"
      width="275px"
      > > height="205px"/>
      > >
      > > </svg>
      > >
      > >
      > >
      > >
      > >
      > >
      > > Regards
      > >
      > > Christophe
      >
      >
      >
      >
      > -----
      > 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"
      > ----
      > Yahoo! Groups Links
    Your message has been successfully submitted and would be delivered to recipients shortly.