查找在JavaScript中三次Bezier曲线的所有点 [英] Find all the points of a cubic bezier curve in javascript

问题描述

我有三次贝塞尔以2控制点。起点和控制点是已知的。需要获得曲线的所有点，所给出的控制，开始和结束点。 我想实现的是从1 ..given一个值i到曲线的长度..得到在该位置各点的X和Y和α（角）。 我不能找到一个很好的参考或工作code为。 我使用的是JavaScript的。

I have a cubic bezier with 2 control points. Starting point and control points are known. Need to get all the points of the curve, given the control, starting and ending points. What I wanna to achieve is ..given a value i from 1 to length of curve.. get the X and Y and alpha (angle) of each point in that position. I cannot find a good reference or working code for that. I'm using javascript.

推荐答案

如果我理解正确的话，您要确定位置和斜率（切线到曲线）贝塞尔的，在每一点上。

If I understand correctly, you are trying to determine the position and slope (tangent to the curve) of the Bezier, at every point.

让我们假设你的出发点是（AX，AY），终点为（DX，DY）和你的控制点（BX，BY）和（CX，CY）。

Let's assume that your start point is (ax, ay), the end point is (dx, dy) and your control points are (bx, by) and (cx, cy).

的位置是很容易。首先，计算的混合功能。这些控制的控制点在曲线上的效果。

Position is easy. First, compute the blending functions. These control the "effect" of your control points on the curve.

B0_t = (1-t)^3
B1_t = 3 * t * (1-t)^2
B2_t = 3 * t^2 * (1-t)
B3_t = t^3

注意B0_t如何为1时，t为0（和其他一切是零）。此外，B3_t为1时，t为1（和其他一切是零）。所以，曲线开始于（斧，AY），并结束在（DX，DY）。

Notice how B0_t is 1 when t is 0 (and everything else is zero). Also, B3_t is 1 when t is 1 (and everything else is zero). So the curve starts at (ax, ay), and ends at (dx, dy).

不限中间点（px_t，py_t）将通过以下（变化吨从0到1，以较小的增量在一个循环内）给予

Any intermediate point (px_t, py_t) will be given by the following (vary t from 0 to 1, in small increments inside a loop):

px_t = (B0_t * ax) + (B1_t * bx) + (B2_t * cx) + (B3_t * dx)
py_t = (B0_t * ay) + (B1_t * by) + (B2_t * cy) + (B3_t * dy)

坡度也很容易做到。使用 http://stackoverflow.com/a/4091430/1384030

B0_dt = -3(1-t)^2
B1_dt = 3(1-t)^2 -6t(1-t)
B2_dt = - 3t^2 + 6t(1-t)
B3_dt = 3t^2

因此​​，x和y的变化率是：

So, the rate of change of x and y are:

px_dt = (B0_dt * ax) + (B1_dt * bx) + (B2_dt * cx) + (B3_dt * dx)
py_dt = (B0_dt * ay) + (B1_dt * by) + (B2_dt * cy) + (B3_dt * dy)

然后用 Math.atan2（py_dt，px_dt）获得的角度（弧度）。

And then use Math.atan2(py_dt,px_dt) to get the angle (in radians).

这篇关于查找在JavaScript中三次Bezier曲线的所有点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！