Javascript 移相器3中的移动遮罩问题

我对面具行为的理解有问题。我在一个容器里有一个圆形的图像，然后在上面放一个稍小的图像，在它周围创建一个边框。为了确保我可以使用多种图像，我将从图形形状创建的圆形遮罩应用于较小的图像，以便它始终适合，即使它是矩形的。我还将形状添加到容器中

Container
- biggerImage
- graphics shape
- smallerImage with mask

现在我想开始移动容器，使图像和遮罩相对于容器移动。我的问题是，我似乎无法使面具移动。阅读文档后，我了解到要更改遮罩位置，需要移动创建遮罩的形状，而不是实际的遮罩。通过移动容器，理论上我也会移动形状，但由于形状的实际位置从未真正改变（相对于容器，它是0,0-它在其中），遮罩不会移动一英寸。它只是位于画布左上角的场景原点（0,0）

我有点理解为什么会发生这种情况，但我似乎无法找到解决办法。我考虑将遮罩应用于整个容器，这样我就不必担心相对位置，但是我的第一张图像也会受到遮罩的影响，这不是我想要做的。也许有一种方法可以告诉面具跟随容器移动，而不是形状本身，或者也许有人有另一种方法来解决我的问题。我在下面包含了一个代码示例

//create draggable container to move everything around
let container = this.add.container(200, 200).setInteractive({hitArea: new Phaser.Geom.Circle(0, 0, 20), hitAreaCallback: Phaser.Geom.Circle.Contains, draggable: true});

//create big circle image and add it to container
let biggerImage = this.add.image(0, 0, 'circleImage').setDisplaySize(40, 40).setTintFill(0xFFFFFF);
container.add(biggerImage);

//create smaller circle to use as a mask
let shape = this.make.graphics().fillCircle(0, 0, 15);
container.add(shape);

//create small rectangular image, apply mask and add it to container
let smallerImage = this.add.image(0, 0, 'rectImage').setMask(shape.createGeometryMask());
container.add(smallerImage);

下面是我想要的样子

请注意，当面具后面的粉红色圆圈不受影响时，男孩的较小图像是如何受面具影响的。这是因为我已经将图形形状的位置设置为它所在容器的位置。遮罩现在将始终保持在该位置，而不是0,0，但它仍然不移动