pixijs 图形旋转问题，使图形按照自身中心点旋转

目标:绘制的图形按照图形自身中心点（或者某点）旋转

1、创建图形

app = new PIXI.Application({
        width: 1000,
        height: 800,
      });
      document.getElementById("px-render").append(app.view);
      const graphics = new PIXI.Graphics();
      graphics.lineStyle(10, 0xFFFFFF);
      graphics.moveTo(100, 100);
      graphics.lineTo(200, 100);
      graphics.lineTo(200, 200);
      graphics.lineTo(300, 200);
      app.stage.addChild(graphics)

我想按照图形中心点旋转

image.png

pixijs 使用Graphics创建图形，看官方文档，旋转有两种方式1、anchor， 2、pivot，发现Graphics没有anchor属性，那我们只能使用pivot。
2、好，开始旋转，添加旋转代码

app = new PIXI.Application({
        width: 1000,
        height: 800,
      });
      document.getElementById("px-render").append(app.view);
      const graphics = new PIXI.Graphics();
      graphics.lineStyle(10, 0xFFFFFF);
      graphics.moveTo(100, 100);
      graphics.lineTo(200, 100);
      graphics.lineTo(200, 200);
      graphics.lineTo(300, 200);
      graphics.pivot.set(200, 150); // 设置中心点
      graphics.rotation = Math.PI / 2;
      app.stage.addChild(graphics)；

但是但是，问题来了，如果只使用pivot后，再添加旋转，图形和我们想象中的位置不一样

1686713431279.png

3、添加偏移，解决问题

app = new PIXI.Application({
        width: 1000,
        height: 800,
      });
      document.getElementById("px-render").append(app.view);
      const graphics = new PIXI.Graphics();
      graphics.lineStyle(10, 0xFFFFFF);
      graphics.moveTo(100, 100);
      graphics.lineTo(200, 100);
      graphics.lineTo(200, 200);
      graphics.lineTo(300, 200);
      graphics.position.set(200, 150); // 设置位置偏移
      graphics.pivot.set(200, 150); // 设置中心点
      graphics.rotation = Math.PI / 2;
      app.stage.addChild(graphics)；

image.png

当然，如果你想绕别的点，就把position和pivot设置成一样就可以了