W3C home > Mailing lists > Public > www-svg@w3.org > November 2002

Re: currentTranslate and currentTranslate (again)

From: Sigurd Lerstad <sigler@bredband.no>
Date: Thu, 28 Nov 2002 08:09:50 +0100
Message-ID: <006501c296ad$24d606b0$541273d5@mmstudio>
To: "Kevin Lindsey" <kevin@kevlindev.com>, <www-svg@w3.org>

First of all, thank you for answering...

But your answer confuses me, first you say the latter (that the image should
be translated and then scaled), then you give the following pseudo-code

     rect.x = rect.x * scale + translate.x;
     rect.y = rect.y * scale + translate.y;
     rect.width *= scale;
     rect.height *= scale;

which with my limited mathematical skills is scaling then translating (i.e)
"(value*scale) + translate"

translating then scaling would be: "(value+translate)*scale"

I feel like I'm missing something here (and I feel a little stupid as well
:)

Maybe I'm confusing the way of thinking with matrixes?

is

"translate(xy)  scale(f)" the same as "(value*scalef)+translatexy"

and

"scale(f) translate(xy)" the same as "(value+translatexy)*scalef"

In which case, I need to reverse my thinking when saying which is first and
which is last?

thanks again,

--
Sigurd Lerstad

> Sigurd,
>
> > My question is if the currentTranslate should be performed after or
before
> > the currentScale, that is:
> >
> > should the image be scaled, and then translated or should the image be
> > translated, and then scaled (the scaling would also affect the
> translation)
>
> The short answer is the latter.
>
>     <svg onload="init(evt)">
>         <script type="text/ecmascript">
>             function init(evt) {
>                 if ( window.svgDocument == null )
>                     svgDocument = evt.target.ownerDocument;
>
>                 var svgRoot = svgDocument.rootElement;
>                 svgRoot.currentScale = 2;
>                 svgRoot.currentTranslate.x = 10;
>                 svgRoot.currentTranslate.y = 10;
>             }
>         </script>
>         <rect width="10" height="10" fill="blue"/>
>     </svg>
>
> should look the same as:
>
>     <svg>
>         <rect width="10" height="10" fill="blue"
>               transform="translate(10,10) scale(2)"/>
>     </svg>
>
> the rect's new dimensions could be calculated in a manner similar to this
> pseudo-code:
>
>     var scale = 2;
>     var translate = new Point(10,10);
>     rect.x = rect.x * scale + translate.x;
>     rect.y = rect.y * scale + translate.y;
>     rect.width *= scale;
>     rect.height *= scale;
>
Received on Wednesday, 27 November 2002 12:09:20 GMT

This archive was generated by hypermail 2.3.1 : Friday, 8 March 2013 15:54:23 GMT