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

时间:2014-08-12 08:50:03

标签: javascript pixi.js

我正在尝试制作一个DisplayObjectContainers网格,所以我根据每个元素的宽度和高度对元素进行排序。我在容器中添加了一个Sprite,问题是当我在容器中添加相同大小的Graphics元素时,宽度和高度会发生变化。我在这里缩小了问题:

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);

那么当我在同一个容器中绘制相同大小的Rectangle时,为什么宽度和高度会发生变化?你有同样的问题吗?

谢谢

1 个答案:

答案 0 :(得分:0)

我在这里粘贴了另一个论坛上找到的答案。如果它对任何人有帮助......

PIXI.Graphics定义了这样的边界:

var padding = this.boundsPadding;
this.bounds = new PIXI.Rectangle(minX - padding, minY - padding, (maxX - minX) + padding * 2, (maxY - minY) + padding * 2);

this.boundsPadding在Graphics构造函数中设置为10.

我相信这会增加额外的20px宽度和10px高度。

我将boundsPadding设置为0,它完美无缺!