将图像添加到Phaser.Rectangle

Question

这是我生成矩形的代码。现在，我想在该矩形内添加图像，以使它们彼此不重叠。

let friendAndFoe, enemies, bmd, rectangle, colors;
var i = 0;
var p = null;
let SceneThree = {
    create: function () {
        colors = Phaser.Color.HSVColorWheel();
        rectangle = new Phaser.Rectangle(60, 300, 600, 200);
        bmd = this.game.add.bitmapData(this.game.width, this.game.height);

        bmd.rect(rectangle.x, rectangle.y, rectangle.width, rectangle.height, '#2d2d2d');

        bmd.addToWorld();

        p = new Phaser.Point();
    },


    update: function () {
        for (var c = 0; c < 10; c++) {
            rectangle.random(p);
            p.floor();
            // Add image here 
this.game.add.image(p.x, p.y, 'apple');
        }
    }
};
game.state.add('SceneThree', SceneThree);

如何添加不超过矩形边框的图像？