在javascript中找到三次贝塞尔曲线的所有点 [英] Find all the points of a cubic bezier curve in javascript

问题描述

我有一个带有 2 个控制点的三次贝塞尔曲线.起点和控制点是已知的.需要得到曲线的所有点，给定控制，起点和终点.我想要实现的是..给定一个从 1 到曲线长度的值 i.. 获取该位置每个点的 X 和 Y 以及 alpha(角度).我找不到一个好的参考或工作代码.我正在使用 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.

推荐答案

如果我理解正确，您正在尝试确定 Bezier 在每个点的位置和斜率(与曲线相切).

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

注意当 t 为 0 时 B0_t 如何为 1(其他所有内容都为零).此外，当 t 为 1 时，B3_t 为 1(其他所有内容均为零).所以曲线开始于 (ax, 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) 将由以下给出(将 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)

斜坡也很容易做到.使用https://stackoverflow.com/a/4091430/1384030

Slope is also easy to do. Using the method given in https://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中找到三次贝塞尔曲线的所有点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！