Как я могу преобразовать curveTo () в список очков?

Question

Возьмите следующий AS3, который будет рисовать кривую линию, используя curveTo():

var line:Shape = new Shape();

line.x = line.y = 20;
line.graphics.lineStyle(2, 0xFF0000);
line.graphics.curveTo(200, 200, 200, 0);

addChild(line);

Получается визуальный результат:

Теперь я хочу, чтобы что-то могло идти по этому пути; как я могу преобразовать этот визуал в список координат? Я борюсь с любой продвинутой математикой, но я предполагаю, что есть очевидная (для некоторых) формула, которую curveTo() использует для создания вышеуказанного, которую я могу повторить и изменить, чтобы создать желаемый список.

Результат может выглядеть примерно так (при условии смещения примерно 5 пикселей между точками).

Vector.<Point> = [
    new Point(20, 20),
    new Point(23, 23),
    new Point(27, 28),
    new Point(33, 32),
    new Point(40, 37)
    /* ...etc... */
];

Результат будет использоваться для таких вещей, как создание дождя из снарядов, следующих по следующим путям, например:

Answer 1

Из прочтения документации ActionScript я понимаю, что метод curveTo в сценарии action генерирует квадратичную кривую Безье.

Кривая состоит из трех «контрольных точек», которые вы указали в своем коде:

control point 1 (p1) = (20,20)
control point 2 (p2) = (200,200)
control point 3 (p3) = (200,0)

Для интерполяции значения вдоль кривой со значением u в диапазоне от 0 до 1 (0 - начальная точка, 1 - конечная точка), вы можете использовать так называемые полиномы Бернштейна. Для квадратичной кривой (ваш случай) полиномы:

B1 = (1 - u) * (1 - u)
B2 = 2 * u * (1 - u)
B3 = u * u

Просто рассчитайте эти числа для значения параметра u и сложите контрольные точки, умноженные на их соответствующие полиномы Бернштейна.

point on curve at parameter *u* = p1 * B1 + p2 * b2 + p3 * B3

Так, например, если вы хотите получить 5 точек вдоль кривой, вы рассчитываете точки вдоль кривой при значениях параметров 0, 0,25, 0,5, 0,75 и 1,0

Answer 2

curveTo() используется для построения квадратичной кривой Безье, где кривая Безье рассчитывается между двумя конечными точками и относительно двух опорных точек, а квадратичная кривая Безье - это та, в которой обе опорные точки имеют одинаковые координаты.

Кривые Безье рассчитываются по ряду уравнений, которые позволяют вам найти координаты x и y для точки, которая достигается в данный момент времени вдоль пути, так что это уже вполне соответствует вашим потребностям. Вы можете найти общую информацию о кривых Безье на этой странице .

Все, что вам нужно сделать, чтобы получить координаты, - это перевести эти уравнения в ActionScript. И, к счастью, Paul Tondeur имеет хороший пост в блоге, показывающий, как это сделать. Его решение используется для рисования кубических кривых Безье, но вы можете легко изменить код так, чтобы он возвращал координаты того, что вы пытаетесь сделать.

Answer 3

Кривая Безье является параметрической функцией.Квадратичная кривая Безье (т.е. три контрольные точки) может быть выражена как: F (t) = A (1 - t) ^ 2 + B (1 - t) t + Ct ^ 2, где A, B и C - точки и tпереходит от нуля к единице.

Это даст вам два уравнения:

x = a(1 - t)^2 + b(1 - t)t + ct^2

y = d(1 - t)^2 + e(1 - t)t + ft^2

Если вы добавите к этому, например, линейное уравнение (y = kx + m), вы закончитес тремя уравнениями и тремя неизвестными (x, y и t).

из: Как найти математическую функцию, определяющую кривую Безье

, используя этоУравнение, вы можете создать массив координат х и у