问题标签 [cubic-bezier]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
1347 浏览

audio - 是否可以根据 x 值获得三次贝塞尔曲线的 y 值?

我正在使用贝塞尔曲线来表示音频的波形数据。然后我想在 x 坐标处对波进行采样并获取 y 坐标,以便我可以将其转换为 PCM 数据。现在,由于贝塞尔曲线是用参数方程表示的,这可能会带来问题,因为可能有多个 y 值和一个 x 值,但是对于我要采样的曲线,我可以保证它们满足函数的标准,只有它们仍然被表示为 para-度量上。所以我的问题是,有没有办法根据 x 值直接采样 y 值?如果不是这样,最好的方法是什么?我现在最好的想法是沿着曲线移动,直到达到所需的 x 值,然后使用该 y 值,但这感觉缓慢且效率低下。谢谢你。

0 投票
2 回答
996 浏览

delphi - B 样条曲线系数 - 除以零(DELPHI 中的代码)

我试图在我的代码中实现以下递归公式 在此处输入图像描述

但令我惊讶的是,在对 DELPHI 实施此操作后,由于除以零而出现错误。我 98% 确信我的节点向量计算正确,这在某种程度上意味着不应该有任何除以零。我有 70% 的把握正确实现了递归公式,因此我在这里发布我的代码:

基本上我不知道如何继续。我需要基系数矩阵 N 的值(请参阅此链接),但不知何故使用此链接中的公式导致我除以零。

那么......是否有一种完全不同的方法来计算这些系数或者这里有什么问题?

更新

我没有使用我自己的想法,而是尝试按照Dsm在评论中的建议从这里实现算法。结果,不再被零除,但无论如何结果是完全出乎意料的。

对于 n + 1 = 10 个样条度数为 3 的随机拟合点,基矩阵 N(请参见链接)是奇异的 - 如所附图像所示。

在此处输入图像描述

相反,我希望矩阵是带矩阵。无论如何,这是我更新的代码:

0 投票
0 回答
258 浏览

android - 如何将 android.graphics.Path.arcTo (椭圆形,startAngle,sweepAngle)转换为 android.graphics.Path.cubicTo()

我已经对此进行了很多搜索。比如how-to-create-circle-with-bézier-curveshow-to-best-approximate-a-geometrical-arc-with-a-bezier-curve等。但一切似乎我作为 Arc 到贝塞尔曲线的任意近似。谢谢

0 投票
1 回答
413 浏览

android - 如何绘制一条穿过我的接触点的连续曲线?

我在实现用于绘制贝塞尔曲线的代码时遇到问题,该曲线在 iOS 中运行良好。

我想要这个效果。但有接触点。

但我搞错了。这条线的问题

previousCenterPoint = CenterPointOf(new PointF(points.get(0).x,points.get(0).y), previousPoint);

在 iOS 中,使用 currentPoint 我们可以获得当前点。

请建议我如何获得路径的当前轮廓点....

这是我的代码..

0 投票
1 回答
262 浏览

css - 从 svg 路径计算 css 缓动函数

offset-path我有一个使用 css声明遵循 svg 路径的圆圈:

然后我有一个动画,其中包含一组关键帧,用于说明该动画在动画的每个阶段应该走多远:

如果我要在每一步绘制出我想要的缓动曲线,它看起来像下面的第二张图片,并且具有以下 svg 路径坐标:

有没有办法从该路径创建一个 css 缓动函数?或者换句话说,有没有办法创建一个多阶段贝塞尔缓动函数?

运动路径: 运动路径

在路径进展的每一步缓和:

在路径进展的每一步缓和

0 投票
2 回答
532 浏览

javascript - 四面、二维形状的细分

我正在寻找一种将四边形分割成网格的方法。例如: 在此处输入图像描述

最终我需要能够将生成的形状转换为 SVG,但我很乐意处理与另一个库或坐标系之间的转换。我正在寻找的是如何进行计算。

假设该形状是按二次方绘制的四边形状,其中每边可以是凹的或凸的,但没有边缘与其他边缘或自身重叠,并且四个边中的任何一个都可以弯曲。

对于四边多边形(具有直边的形状很简单),同样的方法,如果两个相对的边是直线,很容易找到相交点,因为它们将位于相对边的细分之间绘制的直线上. 从那里可以相对容易地计算将它们连接到沿替代轴的前一个点所需的曲线:

在此处输入图像描述

但是,当没有两个直的、相对的边时(如上面的第三个示例),我不确定如何找到这些点,因为不再确定这些点位于一条直线上。

我花了很长时间寻找有记录的方法,但无济于事。

这是一个使用SVG来描述它的起始形状的例子(它不必在SVG中处理,只要我可以输出到SVG。

编辑:我在 Stack Exchange Maths 上问了一个类似的问题,其中一个答案描述了一种方法 - 使用Coons Patch。Quora解释在这里

0 投票
1 回答
1016 浏览

android - MPAndroid Chart - LimitLine 和 Cubic Bezier 绘图 - 曲线超过 min-max 限制线

屏幕截图显示了相同数据的具有和不具有三次贝塞尔模式的图表。正如您所看到的,当启用三次贝塞尔模式时,这条线超出了我需要在图表中显示为 LimitLine 的最小值和最大值,它看起来非常糟糕。

有没有什么办法解决这一问题??

在此处输入图像描述

0 投票
2 回答
1805 浏览

math - 三次贝塞尔曲线 - 获得给定 X 的 Y - 控制点 X 增加的特殊情况

我已经阅读 一些 关于在 X 处为三次贝塞尔曲线找到 Y 的讨论,并且还阅读了有关此事的这篇文章

我的案例比一般案例更受限制,我想知道是否有比上述讨论中提到的一般案例更好的解决方案。

我的情况:

  • X不同控制点的值在增加。即: X3 > X2 > X1 > X0
  • 此外,由于上述原因,X(t)也是严格单调递增的。

有没有考虑到这些约束的有效算法?

0 投票
2 回答
82 浏览

html - 谁能告诉我为什么位置:在 CSS 中的三次贝塞尔函数中需要固定?

这是以下具有位置的代码:固定。如果我删除这条线,那么我的三次函数就不能简单地工作。谁能告诉我这种定位的工作原理。此外,建议一些资源以更好地理解定位。

0 投票
1 回答
53 浏览

android - 尝试轮询贝塞尔曲线的 Y 坐标但得到一条直线?

我想从我生成的贝塞尔曲线路径中获取 Y 坐标值的列表。

但我得到的只是一条直线,出了什么问题?

这是代码片段:

因此,我没有给出正确的结果 - y 坐标在开始和结束时挤在一起,而在中间更分散,我得到了一个增量整数系列,增量是恒定的,这表明它是一条直线。怎么了?