问题标签 [cubic-bezier]

我有一个函数返回一个缓动函数，该函数接受 3 个参数并在百分比完成时间返回 css propertyValue: function(percentComplete, startValue, endValue)。

但是为了对我有用，我需要它的三次贝塞尔曲线cubicBezier(<P1x>,<P1y>,<P2x>,<P2y>)，我该如何实现呢？

因此，我正在尝试创建一个使对象以弯曲运动移动的功能。这个函数应该被重用并且应该能够将不同的数字作为参数。这些数字将用作指导曲线方向的控制点。我面临两个问题：

1. 当尝试使用参数point0x而point0y不是方程中的变量时，输出的xt值与我使用变量时的差异很大。同时，输出yt为NaN. 但是，每当我插入p0.x并p0.y替换它们时，一切都会按预期进行。

2. 我想用它cancelRequestAnimationFrame();来停止动画递归。我不断收到错误消息：

   cancelRequestAnimationFrame 未定义。

   我需要在完全不同的功能中取消吗？我应该避免在if声明中使用它吗？

我通过插值（很多）点来生成平滑曲线。我想有局部支持（即只有几个点确定局部平滑曲线），所以我不想使用经典的插值样条。贝塞尔曲线对我来说是一个自然的解决方案，Inkscape 的自动平滑节点（http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Paths-Editing.html#Paths-Node-AutoSmooth）可以很好地满足我的要求具有。但是我很难在源代码中找到实现或对底层算法的一些参考。

这里是否有人知道该算法或对 Inkscape 的源代码足够熟悉，以便他们可以为我指明正确的方向？

对于上下文：我正在计算笔式绘图仪的平滑路径，但迫不及待地想要获得所有支持点。

我想在页面加载后添加带有贝塞尔曲线的过渡定时功能。我有一个代码，它在悬停时可以正常工作，但我希望自动获得相同的效果。所以我使用了动画名称。但贝塞尔曲线效应似乎不起作用。不过，它在悬停时工作得很好。

我需要在没有 ctx.bezierCurveTo 方法的情况下使用本机 Javascript 绘制并获取每个步骤的贝塞尔曲线坐标。

我尝试了下面的方法，但它不能正常工作。在这里我附上了我的代码和输出曲线。

你好，

我有两条多段三次贝塞尔样条曲线 S 和 S'，它们被线 A 和 B 截断（img.1）。红点之间的距离是它们的三次贝塞尔曲线。我的问题是如何将这两个样条（S 和 S'）中的每一个分割成相等的段并在这些段点之间绘制法线（img.2）。

有任何想法吗？提前感谢您的帮助。

我正在编写一个脚本来反转 SVG 路径命令的绘制方向，到目前为止一切正常，但没有使用S路径命令或T.

在我的一个仅基于三次贝塞尔曲线的路径反向功能实现C中，可以完美地工作，但是输出路径字符串要大得多，有时是长度的两倍或三倍。

这是一个简化版本reversePath.js，到目前为止，它实现了一些基本的处理S和一个测试页面：

我从Raphael.js的实现开始，将 S 和 Q 和 T 路径命令转换为C（cubicBezier），思考和逆向工程也许我可以找到一种让它工作的方法。

因此，在反转形状时，我需要一些帮助来找出这些S和T路径命令的正确公式。如果有人可以帮助我，S我可以弄清楚自己T。

感谢您的回复。

我正在尝试使用几何着色器渲染三次贝塞尔曲面，所以我有 16 个控制点，它们都是 vec3，我将它们更改为 vec4，在顶点着色器中添加了 w = 1

这就是问题所在：

几何着色器采用基元形式的顶点数组对吗？（例如点、线、三角形）并且每次只能获得最多 6 个顶点（三角形邻接的情况）但我必须知道所有 16 个顶点（在我绘制任何东西之前，它们是三次贝塞尔曲面的控制点）。

我怎么解决这个问题？glDrawArrays() 不是我应该使用的函数吗？

我在 D3.js 中有一个力导向图，其中节点半径与该数据的属性（例如，页面浏览量）成正比，链接宽度与链接数据的属性（例如，点击）成比例。我想给链接曲线一个方向的指标。问题是链接到达数据节点的中心，所以如果我使用marker-end，我会得到：

（数据节点通常用链接到另一个数据类别的颜色填充......）

我使用以下方法创建我的 ~~arcs~~ 曲线：

我的代码调用arc的是一个 SVG“S”路径，它是一个“平滑曲线”，但我并不特别喜欢这个：我只需要将弧线彼此分开，这样我就可以显示数据之间的差异在一个方向和另一个方向。

如何定位贝塞尔曲线与圆的交点？

（由于曲线的目标是圆心，我想这可以改写为“贝塞尔曲线在距r其终点的距离处的值”）

如果我有这一点，我可以让它成为一个箭头的顶点。

（如果我在那个点有贝塞尔曲线的斜率会更好，这样我就可以真正对齐它，但我认为我可以将它与中点和锚点之间的线对齐......）

我无法像 SVG 中的贝塞尔曲线那样构建一条穿过所有点但不在这些点之外的曲线。

我尝试过贝塞尔曲线、二次曲线、平滑曲线和 Casteljau

这是我的示例的链接https://dotnetfiddle.net/KEqts0

不幸的是，我可以使用第 3 方进行映射。

我不想放置输出，因为那只是噪音，我附上了一张图片供参考。