缩放到PIXI.js中的特定点

时间:2015-01-06 21:44:59

标签: javascript pixi.js

我正在尝试缩放到PIXI.js Sprite对象上的特定点。我可以通过改变锚点来对应于那个点来实现类似的效果,然而,这会使我不可能发生的坐标系统搞砸。有没有人有任何关于如何通过重新定位精灵对象来做到这一点的想法?

这个例子是我想要实现的,但在代码中他们使用了一些在pixi的新版本中不存在的功能。

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

谢谢!

1 个答案:

答案 0 :(得分:2)

我建议你把你的精灵放在PIXI.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); 

您无法在容器上设置锚点,当您缩放容器时,它会缩放中心。因此,将精灵放置在容器中,使缩放中心与容器中心对齐。然后,您可以移动容器(而不是精灵),以便拥有适合您的坐标系。

(根据PIXI版本,您应该使用PIXI.Container或PIXI.DisplayObjectContainer。)