纸张.js中的线条变形

Line deformation in paper.js

本文关键字：变形 js 纸张      更新时间：2023-09-26

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

以下是我迄今为止所做工作的jsbin：

http://jsbin.com/luwosiniga/1/edit?js，输出

主要问题是：

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

也就是说，我可以看到线段点控制柄已经移动，但路径形状保持不变，而且它只对第一个线段执行此操作。控制台输出中的值（handleIn.x）为20。有什么建议吗？

此外，如果可以采用任何其他技术，知道。。。

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

我认为主要的问题是线路sigmoid_path.smooth()。如果您评论出线变形；平滑路径可以消除变形。也许每个事件开始时都要平滑路径，然后使线变形。看起来，调整相邻分段的控制柄可能会产生更令人愉快的变形。

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

如果你想看一看，我的修订版就在这里：jsbin.com/sukolimavu/2/edit

需要注意的是，在onFrame处理程序经过曲线长度后，我会关闭它，这有助于在处理代码时提高性能。

相关文章：