javascript - 在移相器 3 中移动遮罩的问题

Question

我对面具行为的理解存在问题。我在容器内有一个圆形图像，然后将另一个稍小的图像放在顶部以在其周围创建一种边框。为了确保我可以使用各种图像，我将我从图形形状创建的圆形蒙版应用于较小的图像，以便它始终适合，即使它是矩形的。我也将形状添加到容器中。

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，但它仍然不会移动。

标签： javascripthtml5-canvasphaser-framework