问题标签 [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 回答
32 浏览

arrays - 绘图的意外输出

目前试图整理一些代码,我想将曲线添加到一个数组中,然后简单地使用该数组来绘制而不是单独调用,这也将帮助我在以后填写。我有我的数组,但由于某种原因,我得到了一个奇怪的输出,这与我期望的不同,随机线从中间切开。

试图改变数组填充曲线的顺序无效

如果我用以下代码替换外部并绘制外部

然后我得到了我的预期,希望这会有所帮助。先感谢您

0 投票
3 回答
2173 浏览

javascript - 如何从 Three.js 中的 3D 点创建 3D 三次贝塞尔曲线三角形?

按照这个主题,我正在尝试生成一个 3D 弯曲三角形作为 NURBS 曲面,但我不明白如何设置我的 3D 点来做到这一点。

这是当前的实现:

结果如下:

在此处输入图像描述

我尝试了许多不同的设置,但找不到任何正常工作。

注意:白点是边缘端;红点是贝塞尔曲线的中点。
注2:dots[0]0样本图片中的点,以此类推。

这是工作片段(这里是小提琴版本

0 投票
0 回答
62 浏览

math - 三次贝塞尔路径——在拉直弧长的同时保持弧长

我想“拉直”三次贝塞尔路径,使其弧长得以保留。

在此处输入图像描述

A的坐标B及其控制点 (CD) 以及它们的目的地 (A'B')。A因此,在为 toA'Bto制作动画时,B'我还需要计算CandD的值,以使线条看起来同样长。

如此处所述弧长:

对于三次和更高的贝塞尔曲线,如果您想将其用于“所有可能的坐标”,则无法解决此函数。

以前有人过来过吗?

0 投票
0 回答
59 浏览

bezier - 轨迹的巴特沃斯滤波和贝塞尔平滑

所以我有一个表示线性运动的 xyz 坐标的数据集。数据集嘈杂,我试图使用贝塞尔曲线提取尽可能接近真实轨迹的平滑轨迹,并将每个点拟合为曲线的控制点。结果令人满意,所以我想知道使用低通巴特沃斯的预滤波是否会显示出更好的结果。

一般来说,将贝塞尔曲线或三次平滑样条曲线等平滑技术与低通滤波相结合是否有用?

0 投票
0 回答
249 浏览

javascript - 使用 CSS 的 N 点 Cubic-Bezier 过渡

不久前,我看到一个按钮在 width 属性上使用了三次贝塞尔过渡。我真的很喜欢它的外观,以及重新创建它是多么简单。

这是我制作的一个简单版本:https ://codepen.io/Xemros/pen/oNNKjLm

这对我来说已经很有效了,但我想更进一步。我想在我的三次贝塞尔过渡中添加更多点以创建“稳定”效果,因此最后的弹性感觉更加自然。但是 css 函数只需要 4 个参数,它们是两个点的坐标。像这样:三次贝塞尔曲线(x1,y1,x2,y2)。

这是我用来测试参数的工具:https ://cubic-bezier.com/#.68,-0.55,.26,1.55

这是一个绘制得很差的图表来说明我希望我的过渡如何表现:https ://i.stack.imgur.com/vKD6I.png

有谁知道在 CSS 或 JS/Jquery 中实现这一目标的简单方法?如果没有简单的方法,那么创建过渡的最有效方法是什么?

0 投票
1 回答
885 浏览

svg - Express SVG arc as series of curves

I'm trying to accurately express an SVG Path as a UIBezierPath however sadly the addArc on UIBezierPath does not account for ellipses, only circles (only 1 value for radius).

My thinking would be to break the arc into pieces as svg curves, but I'm not sure how to calculate it.

If I know the shape I want to make I can turn say, the top right corner arc

a150,150 0 1,0 150,-150 into a curve c82.84,0,150,44.77,150,100

but as I'll be parsing any possible arc, I need to know how to break up any ellipse and also calculate control points for each of the Bezier curves.

I've been looking at various resources that show cubic curves calculated in this way... http://www.spaceroots.org/documents/ellipse/node12.html

but I'm not sure how to express this in code

This is what I have so far....

Values for an a path in SVG

radiusX radiusY rotationOfArcX isLarge isSweep destinationX destinationY

Edit

@Spektre your answer looks great when I render out some simple paths but the path is moving depending on large + sweep combination.

For example

Small Sweep / Large No Sweep

M 180.0 80.0 a50,50 0 0,1 50,50 z

M 180.0 80.0 a50,50 0 1,0 50,50 z

X has been translated +100

^^ small sweep example

Small No Sweep / Large Sweep

M 180.0 80.0 a50,50 0 0,0 50,50 z

M 180.0 80.0 a50,50 0 1,1 50,50 z

Y has been translated +100

^^ large sweep example

My codes version of your arc

M 10 70 a 133.591805 50 12.97728 0 0 70 -50 z

My version of your code

0 投票
2 回答
665 浏览

geometry - 从贝塞尔曲线到点的垂直线

问题

我需要得到三次(2d)贝塞尔曲线B(t)的Q ,其中从点Q到另一个给定点P的线与贝塞尔曲线垂直相交。

  • 我知道:P , B(t)
  • 我寻找:Q(基本上我想要g的斜率,但是当我知道Q时我可以很容易地计算出来,但是g的斜率就足够了)


到目前为止我所做的(你可以跳过这个)

请注意,我认为这个 ansatz 是错误的。这只是为了完整性。

我试图用我的(基本)数学知识来解决这个问题,但我无法完成它。这就是我现在所拥有的(请不要对符号太严格,我在这方面不是很好):

以下公式将表示为y(x)以获得一个结果,这必须为y(x) x(y)计算。点P是控制点,Q是从QP的线g(x)与贝塞尔曲线B (t) = (x, y) T垂直的点。可以通过以下方式检索g(x)行的表达式

其中B(x)是笛卡尔坐标中的贝塞尔曲线,B'(x)是导数(笛卡尔坐标中),k是与 y 轴的交点。要获得g(x)的斜率,必须解决

要计算B(x) ,必须为t求解B (t),然后将其插回B(t)。所以在贝塞尔曲线上的每个点都有关系

这也适用于导数B '(t)

B (t)的导数是(根据维基百科

为 t 解决这个问题(使用 wolfram alpha)导致

其中a 0 = ( P 1 - P 0 ) xa 1 = ( P 2 - P 1 ) xa 2 = ( P 3 - P 2 ) x。将 *t i *s 插回B (t)会导致 ( wolfram alpha for t 1 , wolfram alpha for t 2 , wolfram alpha for t 3 )

现在接下来的事情是使用y = B'(x)和第二个方程并消除x但我不知道如何,我什至不知道这是否可能。

0 投票
0 回答
257 浏览

python - 任何用于使用 biarcs 逼近 Bezier 曲线的 python 库?

我需要一个简单的 python 库,它可以使用 biarcs(biarc 插值)执行 Bezier 曲线逼近算法。我正在寻找类似于approximating-bezier-curves-by-biarcs中解释的算法,其中还包括 CSharp 实现。

我尝试过在 python 中搜索类似的实现。我找到了一些,但它们在 CNC 控制器代码中,例如 gcodetools。仅提取我需要的部分似乎很复杂。并且找不到任何简单的,只是实现算法。

在我尝试将 CSharp 代码转换为 python 之前,我想在这里检查是否已经存在任何这样的 python 脚本。请分享您认为可能有帮助的任何内容。

0 投票
3 回答
1688 浏览

algorithm - 是否可以从三次贝塞尔曲线方程中表达“t”变量?

我只想通过片段着色器绘制贝塞尔曲线来连接编辑器中的节点。我知道定义贝塞尔曲线的所有 4 个点。并且为每个像素调用片段着色器,所以我可以检查:如果 gl_Coord.x 的“t”在 0 和 1 之间,则例如将 frag_color 设置为红色。我想避免着色器中效率低下的循环。我认为最好的方法是检查曲线上的点。但是如何为贝塞尔曲线做呢?

是否可以从三次贝塞尔方程表达“t”变量?

网站 Wolfram Aplha 给了我那个公式(在 GetBezierT 函数中)。但是公式给了我错误的“t”值,我有一半的抛物线而不是曲线:

更新

犯了个错误。我认为没有必要寻找t。我以为我会忍受它。但是在得到Salix albaand的答案后Stratubas,我意识到如果tX等于tY,这意味着该点将位于曲线上,因为在公式中,每个点的一个值t都代替了xand y。也许有些情况不同tXtY也可以在这条曲线上给出一个点,但我们可以忽略它。构造贝塞尔曲线的算法意味着我们将其线性增加t并将其代入公式中,无论曲线扭曲多少,该算法都会沿曲线顺序返回每个下一个点的坐标。

因此,首先,我再次打开这个问题:如何从三次贝塞尔方程中表达变量 t?

试图表达 t,但这对我来说非常困难。有必要为“科学目的”评估这种方法的有效性=)。在这里问一个问题之前,我搜索了很多,但从未发现有人会尝试使用这种方法。我需要明白为什么。

更新 2

你做得很好!没想到会收到这么详细的回答。正是我需要的。给我时间检查一切=)

更新 3

t结论:来自三次贝塞尔方程的准确表达。耗时的任务,但近似值没有实际用途。为解决这一问题,需要对方程数据进行分析,寻找规律,开发新的贝塞尔曲线构造公式。有了变量之间的新关系,就可以t用不同的方式表达。x如果我们将三次贝塞尔公式表示为控制点坐标乘以四个系数( v0- )的乘积之和,这些系数v3由方程的四个部分中的函数根据t. 这给出了公式 x = ax * v0 + bx * v1 + cx * v2 + dx * v3。如果您查看下表,您会发现变量的表达式t是一个有四个未知数的方程。因为它们之间的一些V系数的值和关系在迭代之间以不可预测的方式变化。找到那个新的抽象公式超出了这个问题的范围和我的能力范围。

V0-V3 系数表

非常感谢大家的工作,特别是Spektre为优化渲染算法所做的独特开发和努力。你的方法对我来说是最好的选择=)

0 投票
0 回答
89 浏览

javascript - 如果我有公式,如何计算三次贝塞尔曲线的控制点/处理 X 位置?

我有一条符合贝塞尔公式的曲线,然后我必须反算手柄位置。

https://www.particleincell.com/2012/bezier-splines/

我们通过最小二乘插值知道PoorPoy[493.33970441 486.78826487 497.69599613 489.07543952], Po, P1, P2, 。P3现在我需要找到手柄Px位置。

我可能没有正确理解,但我想在相应图表上绘制手柄的位置。

在此处输入图像描述