请问如何对动画元素显示区域做限制？

[kxxoling]

已经使用 addEffect 实现了一个 scale:2 的 transition 效果，但是希望显示区域依旧是原始区域，类似网页中父元素 overflow:hidden 的效果，最终实现一个镜头拉近的效果。

[drawcall]

can try

const mask = InkPaint.Sprite.fromImage('..../mask.png');
mask.anchor.set(0.5);
mask.x = x;
mask.y = y;
ffimage.display.mask = mask;

https://github.com/drawcall/inkpaint
run demo

[kxxoling]

最终实现效果的代码如下：

const mask = new Graphics()
mask.x = x
mask.y = y
mask.moveTo(x, y)
mask.lineTo(width + x, y)
mask.lineTo(width + x, height + y)
mask.lineTo(x, height + y)
mask.lineTo(x, y)
node.display.mask = mask
node.addAnimate(...)

写起来很啰嗦，不知道有没有更简便的方法。尝试过使用 Rectangle ，但是没有生效，不知道是不是使用的方法不对。

最后，提几个建议：

1. InkPaint examples 可以直接部署到 GitHub pages，这样就不用在本地运行 npm run examples 了；
2. InkPaint examples 中的编辑器不支持 undo redo，不是很方便
3. FFCreator 最好也能有一个线上的 demo 页，StackBlitz/CodeSanbox/Vercel 或许可以。

[drawcall]

👍 Great. You can submit a pr