2

I am trying to zoom to a specific point on a PIXI.js Sprite object. I can achieve a similar effect by changing the anchor to correspond to that point, however, that screws up the coordinate system which I can't have happen. Does anyone have any ideas as to how I can do this by repositioning the sprite object?

This example is what I am looking to achieve, but in the code they use some functions that don't exist in the new versions of pixi.

http://anvaka.github.io/ngraph/examples/pixi.js/03%20-%20Zoom%20And%20Pan/

Thanks!

user3236088
  • 51
  • 2
  • 4
  • possible duplicate http://stackoverflow.com/questions/25823736/scroll-zoom-a-pixi-js-canvas – DLeh Jan 06 '15 at 21:46
  • Unfortunately this is basically what I currently have. I am able to zoom about the anchor but I want to zoom about a specific point without changing the anchor. – user3236088 Jan 06 '15 at 21:53
  • it should be mostly math. maybe this answer will help http://stackoverflow.com/questions/2916081/zoom-in-on-a-point-using-scale-and-translate – DLeh Jan 06 '15 at 21:54
  • I suppose that math on that may be helpful, but at this point I am unsure of the pixi equivalent to the transforms – user3236088 Jan 06 '15 at 22:00

1 Answers1

2

I would suggest you put your sprite in a PIXI.container, and scale the container: 

var container = new PIXI.Container();
myStage.addChild(container); 
container.addChild(mySprite); 
container.position.set(x,y); // Position of the container in the main container (stage) (where you previously had the sprite)
mySprite.position.set(x,y); // Your "pivot point"
container.scale.set(1.2);

You can't set an anchor on a container, when you scale the container it will scale the center. So, place the sprite in the container as such that the zoom-center is aligned with the containers center. You can then move the container (instead of the sprite) in order to have a coordinate system that works for you.

(Depending on PIXI version you should use PIXI.Container or PIXI.DisplayObjectContainer.)

Patrick Fabrizius
  • 587
  • 7
  • 22