Pixi.js 的anchor和pivot

最近在学习pixi.js中，发现很多文档中关于anchor和pivot的描述，本人是怎么看都看不懂，于是自己动手写代码尝试了一下。

首先，先在画布中添加一张图片来作为案例：

import night from "./assets/cityNightt.jpg"

//创建pixi应用画布
const app = new pixi.Application({
  width: window.innerWidth,
  height: window.innerHeight,
  backgroundColor: 0x1099bb,
  resolution: window.devicePixelRatio || 1,
  resizeTo: window,
})

// 将应用画布添加到DOM中
document.body.appendChild(app.view);

// 添加图片
const texture = pixi.Texture.from(night);
const sprite = new pixi.Sprite(texture);
  //设置图片位置
sprite.position.set(app.screen.width/2, app.screen.height/2); 
app.stage.addChild(sprite);

结果如下图：

 虽然设置了图片位于页面中间，但是图片看上去还是处于页面的右下侧，是因为位于页面中间的是图片的原点，也就是图片左上角的那个点在页面中心。在页面中间加入一个黄色的点，方便之后观察各种变化。

const graphic = new pixi.Graphics();
graphic.beginFill("yellow");
graphic.drawCircle(app.screen.width/2, app.screen.height/2,5);
graphic.endFill();
app.stage.addChild(graphic);

最后页面就变成了下面这样，可以看到图片左上角有一个黄色的点。

 一、pivot

  首先说一说pivot，用通俗的话来说就是，选择sprite(精灵)上的哪个点来当作原点。pivot设置了哪个点作为原点，之后关于sprite的旋转，缩放之类的操作都会以该点为圆心。上面的图片没有设置pivot，所以默认使用sprite的左上角来作为原点。接下来尝试对pivot做一些改变，看看有什么区别。

  (1) 原点选择1

sprite.pivot.set(100,0);

结果如下图：

 可以看到图片向左移动了100的距离，pivot(100,0)的意思就是选择从图片左上角开始的(100,0)这个点作为原点，然后把这个点挪到之前设置position的位置，所以图片会向左移动。

（2）原点选择2

sprite.pivot.set(100,100);

 这次图片不仅左移，而且还向上移动了。

这时突然想到，如果我先把sprite的(100,0)作为原点移动之后，在把(100,100)作为原点，那么这个时候的原点是(100,100)呢还是(200,100)呢？

  结果表明，原点还是(100,100)，效果并没有叠加，而且被覆盖了。

（3）旋转

sprite.pivot.set(100,100);
sprite.rotation = Math.PI / 6;

图片以(100,100)为圆心旋转，没啥好说的。

二、anchor

关于这个anchor，本人也不是很明白，就直接效果图展示吧

 anchor(x,y)，需要注意的是x和y的取值都是0~1。

(1) 原点选择

sprite.anchor.set(1,0);

sprite.anchor.set(1,1);

sprite.anchor.set(0.3,0.5);

（2）旋转

 sprite.anchor.set(0.3,0.5);
 sprite.rotation = Math.PI / 6;

（3）效果是否会叠加

 sprite.anchor.set(0.3,0.5);
 sprite.anchor.set(0.7,0.5);

答案是效果不会叠加，只会覆盖。

三、pivot和anchor一起用

    这个时候上去pivot和anchor的作用其实是差不多的（文中用到的图片大小为500*300），感觉好像pivot(500,0)和anchor(1,0)效果是一样的。而且pivot和pivot、anchor和anchor之间的效果都是后面的覆盖前面的。那么pivot和anchor一起用是不是可以叠加使用呢？

sprite.anchor.set(0.3,0.5);
sprite.pivot.set(100,100);

 效果是显而易见了，如果pivot和anchor一起用效果就是叠加的。

上图是先用anchor再用pivot，那如果反过来，先用pivot再用anchor呢？

 sprite.pivot.set(100,100);
 sprite.anchor.set(0.3,0.5);

哦吼， 效果依旧是叠加的。

如果有哪里说的不对的，请各位指正，感谢。