目標(biāo):繪制的圖形按照?qǐng)D形自身中心點(diǎn)（或者某點(diǎn)）旋轉(zhuǎn)
1苍苞、創(chuàng)建圖形
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)
我想按照?qǐng)D形中心點(diǎn)旋轉(zhuǎn)
image.png
pixijs 使用Graphics創(chuàng)建圖形，看官方文檔狼纬，旋轉(zhuǎn)有兩種方式1羹呵、anchor， 2疗琉、pivot冈欢，發(fā)現(xiàn)Graphics沒(méi)有anchor屬性，那我們只能使用pivot盈简。
2凑耻、好，開(kāi)始旋轉(zhuǎn)柠贤，添加旋轉(zhuǎn)代碼
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); // 設(shè)置中心點(diǎn)
graphics.rotation = Math.PI / 2;
app.stage.addChild(graphics)香浩；
但是但是，問(wèn)題來(lái)了臼勉，如果只使用pivot后邻吭，再添加旋轉(zhuǎn)，圖形和我們想象中的位置不一樣
1686713431279.png
3宴霸、添加偏移囱晴，解決問(wèn)題
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); // 設(shè)置位置偏移
graphics.pivot.set(200, 150); // 設(shè)置中心點(diǎn)
graphics.rotation = Math.PI / 2;
app.stage.addChild(graphics)；
image.png
當(dāng)然瓢谢，如果你想繞別的點(diǎn)畸写，就把position和pivot設(shè)置成一樣就可以了
