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

Возьмите следующую 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... */
];

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

Ответы

Ответ 1

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

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

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

Ответ 2

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

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

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

Ответ 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).

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

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