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

Different size of a container when combing graphics and Sprite in a DisplayObjectContainer

本文关键字:组合 DisplayObjectContainer 组合图 图形 精灵      更新时间:2023-09-26

我试图使一个网格的DisplayObjectContainers,所以我排序的元素取决于每个的宽度和高度。我在容器中添加了一个Sprite,问题是当我在容器中添加相同大小的图形元素时,宽度和高度会发生变化。我把问题缩小到这里:

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。图形界定义如下:

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,效果很好!