Zoom to point within an ActorContainer

[Igor]

Hi, I've been stuck on this for a while and can't seem to figure it out, I think I am getting the model vs view coordinates mixed up somewhere so hoping you can help me out.

What I have is an ActorContainer that contains a grid for my map, this is cached as an image and added to a scene. I keep track of the 'player coordinate' which is just a coordinate where the player is looking at the map, this is just the (x,y) of my container. I've got a mouse wheel event listener that I use for changing the zoom level, the zoom works fine by changing the scale of the ActorContainer, but the map location under the cursor changes, I want to keep this location the same and just reposition the map itself.

I've tried a few obvious things, but just can't get the correct behaviour.

Any help would be greatly appreciated to implement this. :)

Thanks!

[hyperandroid]

Hi Igor,

what you want is to zoom a Container, but keeping the scale center at the cursor position.

this is tricky, but easy ;)

the best option would be to add a method actor.scaleAtScreenPoint( x, y ) exactly with the sample behavior.

will try to add it soon, but in the meantime, you could refactor this code, and have it running.

best,

- Ibon

2013/6/25 Igor <ikr...@gmail.com>

--
You received this message because you are subscribed to the Google Groups "CAAT javascript framework" group.
To unsubscribe from this group and stop receiving emails from it, send an email to caatjs+un...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Igor]

Thanks, I will have a look at this in the next day or two.

[Igor]

Finally got around to this, the following function is undefined: CAAT.Matrix().set(), are you using a different version this class?

On Wednesday, June 26, 2013 8:34:43 PM UTC+10, hyperandroid wrote:

[Igor]

Still waiting for a response on this...

The following line doesn't work because there is not set() function on the Matrix class.

var a= new CAAT.Matrix().set( __x, __y, c.width, c.height,  __anchorX, __anchorY, __rotationAngle, __scale );

-Igor

On Wednesday, June 26, 2013 8:34:43 PM UTC+10, hyperandroid wrote:

[hyperandroid]

Hi Igor,

I added this method to CAAT, which basically solves your algorithmic problems:

            /**

             * Scale this actor by the given scales (scaleX,scaleY) at an screen coordinate.

             * The coordinate of the pointer (x,y) must not be inside the actor.

             * @param x {number}

             * @param y {number}

             * @param scaleX {number}

             * @param scaleY {number}

             * @returns {*}

             */

            setScaleAtScreenPosition : function( x, y, scaleX, scaleY ) {

                var positionInLocal= new CAAT.Point(x,y,0);

                this.viewToModel( positionInLocal );

                this.setPosition(

                     x - positionInLocal.x,

                     y - positionInLocal.y );

                this.setScaleAnchored( scaleX, scaleY, positionInLocal.x/this.width, positionInLocal.y/this.height );

                return this;

            },

You can direct your CAAT/CocoonJS based inquiries to devsu...@ludei.com or to caat googlegroup.

I usually don't answer algorithm related issues, or things that are solved in any of the numerous CAAT samples available, but try to point to the right sample file.

Last week you asked me for advice on this subject, and after reviewing the email, i realize i had not sent you a modified version of CAAT.Math.Matrix object. sorry about that.

Hope this fits your needs.

Best.

2013/7/3 Igor <ikr...@gmail.com>

[hyperandroid]

BTW, this method belong to CAAT.Foundation.Actor and will be available in the official caat.js file tomorrow.

- i

2013/7/10 hyperandroid <hypera...@gmail.com>

[Igor]

Hi Ibon,

This is fantastic, thanks! I did follow up regarding the modified matrix class, that's why I was stuck on the original response. This does solve the issues I was having.

I actually got more or less the behaviour I wanted with setScaleAnchored by calculating the anchor exactly as you do, but it didn't play nice with my clamping code since the coordinate of the map would never change; I guess the missing bit was the setPosition.

I will post my CocoonJS related question shortly once I've put all the info together for it.

Thanks again,

-Igor