Html5 canvas 如何在maximized canvas元素中调整Pixi.js stage并将其居中对齐？

我已经为我的问题准备了一份完整的报告-

对于棋盘游戏，我尝试在两侧使用jqueryui按钮，并将屏幕的其余部分分配给Pixi绘图区域

我发现一位Pixi.js开发人员提出了一个建议，可以自动缩放其子项，下面我将尝试实现它：

$（函数（）{
var宽度=400；
var高度=400；
var比率=宽度/高度；
var scaleX=1，
scaleY=1，
offsetX=0，
offsetY=0，
oldX，oldY；
var app=新的PIXI.Application({
宽度：宽度，
高度:高度,，
视图：document.getElementById（'pixiCanvas'），
背景颜色：0xFFFFFF
});
app.stage.interactive=true；
舞台上的应用（'pointerdown'，onDragStart）
.on（'pointerup'，onDragEnd）
.on（'pointerupoutside'，onDragEnd）
.on（'pointermove'，ondrampove）；
var background=new PIXI.Graphics（）；
对于（变量i=0；i<8；i++）{
对于（var j=0；j<8；j++）{
如果（（i+j）%2==0）{
背景：beginll（0xCCFF）；
背景.drawRect（i*WIDTH/8，j*HEIGHT/8，WIDTH/8，HEIGHT/8）；
background.endFill（）；
}
}
}
app.stage.addChild（后台）；
var bunny=PIXI.Sprite.from（'https://pixijs.io/examples/examples/assets/bunny.png');
兔子。锚。设置（0.5）；
兔体重秤组（2）；
兔子x=宽度/2；
兔子y=身高/2；
app.stage.addChild（兔子）；
启动功能（ev）{
var stagePoint=ev.data.getLocalPosition（app.stage）；
if（bunny.getBounds（）.contains（stagePoint.x，stagePoint.y））{
兔子α=0.5；
oldX=stagePoint.x；
oldY=stagePoint.y；
this.data=ev.data；
}
}
函数ondrampove（）{
如果（这个数据）{
var stagePoint=this.data.getLocalPosition（app.stage）；
bunny.x+=stagePoint.x-oldX；
bunny.y+=stagePoint.y-oldY；
oldX=stagePoint.x；
oldY=stagePoint.y；
}
}
函数onDragEnd（）{
如果（这个数据）{
兔α=1；
var stagePoint=this.data.getLocalPosition（app.stage）；
this.data=null；
}
}
$（'：button'）.button（）；
$（'#scaleCheck'）。checkboxradio（）；
window.onresize=函数（）{
if（！$（'#scaleCheck'）.prop（'checked'））{
返回；
}
var canvasRatio=$（'#pixiCanvas'）。宽度（）/$（'#pixiCanvas'）。高度（）；
if（canvasRatio>RATIO）{//如果画布太宽
scaleX=1/画布比率；
scaleY=1；
offsetX=0；
offsetY=0；
}否则{
scaleX=1；
scaleY=拉票比率；
offsetX=0；
offsetY=0；
}
app.stage.scale.set（scaleX，scaleY）；
app.stage.position.set（offsetX，offsetY）；//如何居中对齐？
}
onresize（）；
});
正文{
保证金：0；
填充：0；
}
#mainDiv{
宽度：100%；
高度：100vh；
背景：#FFF；
显示器：flex；
}
#左门努迪夫{
文本对齐：居中；
背景：#FCC；
}
#右门努迪夫{
文本对齐：居中；
背景：#CFC；
弹性收缩：1；
}
#拉票{
柔性生长：1；
}
#皮西坎瓦斯{
宽度：100%；
身高：100%；
背景：#共因失效；
框大小：边框框；
边框：4个红色点；
}

按钮1

按钮2

按钮3

适合并居中Pixi舞台

按钮4

按钮5

按钮6

我已经能够通过以下代码解决我的问题：



$（函数（）{
var宽度=400；
var高度=400；
var比率=宽度/高度；
变量scaleX=1，scaleY=1，offsetX=0，offsetY=0；
var app=新的PIXI.Application({
宽度：宽度，
高度:高度,，
视图：document.getElementById（'pixiCanvas'），
背景颜色：0xFFFFFF
});
var background=new PIXI.Graphics（）；
对于（变量i=0；i<8；i++）{
对于（var j=0；j<8；j++）{
如果（（i+j）%2==0）{
背景：beginll（0xCCFF）；
背景.drawRect（i*WIDTH/8，j*HEIGHT/8，WIDTH/8，HEIGHT/8）；
background.endFill（）；
}
}
}
app.stage.addChild（后台）；
var bunny=PIXI.Sprite.from（'https://pixijs.io/examples/examples/assets/bunny.png');
bunny.interactive=true；
bunny.buttonMode=true；
兔子。锚。设置（0.5）；
兔体重秤组（2）；
兔子x=宽度/2；
兔子y=身高/2；
邦尼·安（'pointerdown'，onDragStart）
.on（'pointerup'，onDragEnd）
.on（'pointerupoutside'，onDragEnd）
.on（'pointermove'，ondrampove）；
app.stage.addChild（兔子）；
启动功能（ev）{
this.data=ev.data；
这个α=0.5；
}
函数ondrampove（）{
如果（这个数据）{
var newPos=this.data.getLocalPosition（this.parent）；
此.x=新位置x；
this.y=新位置y；
}
}
函数onDragEnd（）{
如果（这个数据）{
这个α=1；
this.data=null；
}
}
$（'：button'）.button（）；
$（'#scaleCheck'）。checkboxradio（）；
window.onresize=函数（）{
if（！$（'#scaleCheck'）.prop（'checked'））{
返回；
}
var canvasRatio=$（'#pixiCanvas'）。宽度（）/$（'#pixiCanvas'）。高度（）；
if（canvasRatio>RATIO）{//如果画布太宽
scaleX=比率/画布比率；
scaleY=1；
偏移量x=（1-刻度x）*宽度/2；
offsetY=0；
}否则{
scaleX=1；
scaleY=游说比率/比率；
offsetX=0；
偏移量=（1-刻度）*高度/2；
}
app.stage.scale.set（scaleX，scaleY）；
应用阶段位置设置（offsetX，offsetY）；
}
onresize（）；
});
正文{
保证金：0；
填充：0；
}
#mainDiv{
宽度：100%；
高度：100vh；
背景：#FFF；
显示器：flex；
}
#离开我