AEJoy —— 表达式之 3D 角点大头针JS

Posted 2021-12-09 panda1234lee

效果图

使用大头钉效果将一个图层的四角附加到三维移动的对象上

想法

有时，如果角点大头针效果能够在三维空间中工作，将非常方便。事实证明，我们可以在某些情况下通过在 2D 层上应用角点大头针来模拟它，并通过使用层空间变换来控制 “针” 的位置，从而将我们想要跟踪的对象的位置投影到 2D 层上。

设计

这个操作成功的关键将是应用层空间变换将一切转换到正确的坐标系统。需要记住的一个关键点是，角点大头针效果的 “角” 的位置是在图层的坐标系统中。例如，如果您将角点大头针应用到一个 100 × 100 的纯色层上，左上（UL）角点大头针的坐标将是 [0,0] ，右下（DR）角点大头针的坐标将是 [100,100] 。因此，我们的解决方案需要将目标层从它们在世界空间中的位置转换为角点大头针层的 2D 坐标空间。如果目标层是其他层的子层，我们也希望它能工作。

我们需要分两步来完成。

第一步是将目标层的位置从世界空间转换到合成空间。最好的方法是将该层的锚点从层空间转换为合成空间。我们之所以这样做, 是因为锚点总是表示层的空间(相对于层的左上角), 因此该层的位置可以被表示在世界空间(如果该层不是子层)或父级层空间(如