目标:绘制的图形按照图形自身中心点（或者某点）旋转
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设置成一样就可以了
