paper.js 中的线条变形

Question

通过使用paper.js，我想创建一个曲线变形的动画，跟随对象移动。这种变形应该只是一个简单的变化，就像在 CorelDraw 中移动路径手柄一样，但它应该跟随移动的对象。

这是我到目前为止的工作的 jsbin：

http://jsbin.com/luwosiniga/1/edit?js,output

主要问题在以下几行：

var sigm_location = sigmoid_path.getNearestLocation(imi_logo.position);
sigm_location.segment.handleIn.x = 20;

也就是说，我可以看到段点手柄移动了，但路径形状保持不变，而且它也只对第一段这样做。控制台输出中的值（handleIn.x）是 20。有什么建议吗？

此外，如果可以为此采用任何其他技术，很高兴知道...

Answer 1

我破解了你创建的 jsbin，发现了一些东西。

我认为首要问题是sigmoid_path.smooth()行。如果您评论说线变形了；平滑路径摆脱变形。也许每个事件都以平滑路径开始，然后使线条变形。看起来调整相邻段的手柄可能会产生更令人愉悦的变形。

我相信您也想使用 sigmoid_path.add(newPoint) 而不是 lineTo，因为您是一次添加一个细分。

我的修改在这里，如果你想看的话：jsbin.com/sukolimavu/2/edit

一个小提示 - 在 onFrame 处理程序经过曲线的长度后我将其关闭 - 它有助于在使用代码时提高性能。