Javascript 在DisplayObjectContainer中组合图形和精灵时容器的不同大小

Javascript 在DisplayObjectContainer中组合图形和精灵时容器的不同大小,javascript,pixi.js,Javascript,Pixi.js,我正在尝试创建一个DisplayObjectContainers网格,因此我将根据每个元素的宽度和高度对元素进行排序。我在一个容器中添加了一个精灵,问题是当我在容器中添加一个大小相同的图形元素时,宽度和高度都会发生变化。我在这里缩小了问题的范围: var cont = new PIXI.DisplayObjectContainer(); stage.addChild(cont); var convx = new PIXI.Sprite.fromImage('assets/img.png'); /

我正在尝试创建一个DisplayObjectContainers网格,因此我将根据每个元素的宽度和高度对元素进行排序。我在一个容器中添加了一个精灵,问题是当我在容器中添加一个大小相同的图形元素时,宽度和高度都会发生变化。我在这里缩小了问题的范围:

var cont = new PIXI.DisplayObjectContainer();
stage.addChild(cont);
var convx = new PIXI.Sprite.fromImage('assets/img.png');
//>>>>>>> image is 289x333
cont.addChild(convx);

var msk = new PIXI.Graphics();
msk.beginFill(0x123456,0.5);
msk.drawRect(0,0,convx.width,convx.height/2);          
//>>>>>>> line above makes cont.width and height 309x343 (???)
msk.drawRect(10,0,convx.width-20,convx.height/2-10); 
//>>>>>>> line above makes cont.width and height = is 289x333 (same as the image)

cont.addChild(msk);
那么,当我在同一个容器中绘制相同大小的矩形时,为什么宽度和高度会发生变化呢?你也有同样的问题吗


谢谢

我将另一个论坛上的答案粘贴到这里。如果它能帮助任何人

PIXI.Graphics定义的边界如下:

var padding = this.boundsPadding;
this.bounds = new PIXI.Rectangle(minX - padding, minY - padding, (maxX - minX) + padding * 2, (maxY - minY) + padding * 2);
此.boundsPadding在图形构造函数中设置为10

我认为这是增加了额外的20px宽度和10px高度


我将boundsPadding设置为0,它工作得非常好

您使用的是哪个版本的PIXI?随着版本1.6Is cont直接添加到舞台上,DisplayObject的宽度/高度发生了巨大的变化,或者它是否有一个父displayobjectcontainer?thx供您帮助。我使用的是1.6.0版,yes cont直接添加到舞台上。如果你愿意,我可以把更多的代码放进去