Блог

Главная - Вопросы по программированию - Генерация кривых JavaScript

Генерация кривых JavaScript

#html #canvas #bezier

#HTML #холст #безье

Вопрос:

Как я могу написать функцию, которая принимает массив 2D точек и возвращает кривые Безье / квадрактики, чтобы я мог перерисовать их позже, используя холст bezierCurveTo или quadraticCurveTo метод HTML5?

Комментарии:

1. сначала вы находите уравнение, затем реализуете уравнение с использованием итеративного подхода, затем тестируете его, затем используете.

2. developer.mozilla.org/en/Canvas_tutorial /… — если это то, что вы ищете

3. Вы могли бы использовать Google: google.com/search ? q = Безье кривая уравнение

Ответ №1:

РЕДАКТИРОВАТЬ: улучшено.

Посмотрите демонстрационную версию, в которой используется приведенный ниже код.

 var makeCurveArgs = function(points) {
  var copy = points.slice();
  var result = [];
  copy.shift(); //drop the first point, it will be handled elsewhere
  var tangent;
  if(copy.length >= 3) {
    var cp1 = copy.shift();
    var cp2 = copy.shift();
    var p2 = copy.shift();

    result.push([cp1[0], cp1[1], cp2[0], cp2[1], p2[0], p2[1]]);            
  }
  while(copy.length >= 2) {
    var cp1 = [2 * p2[0] - cp2[0], 2 * p2[1] - cp2[1]];
    var cp2 = copy.shift();
    var p2 = copy.shift();
    result.push([cp1[0], cp1[1], cp2[0], cp2[1], p2[0], p2[1]]);            
  }
  return resu<
}

var notThatHard = function(points) {
  var origin = points[0].slice();
  var curves = makeCurveArgs(points);
  var drawCurves = function(context) {


    context.beginPath();
    context.moveTo(origin[0], origin[1]);
      for(var i = 0; i < curves.length; i  ) {
      var c = curves[i];
      context.bezierCurveTo(c[0], c[1], c[2], c[3], c[4], c[5]);
  }
  };
  return drawCurves;
};

Общий подход заключается в том, что вы даете мне координаты ваших точек и контрольных точек, а я возвращаю вам функцию, которая будет выполнять этот путь в контексте canvas.

Для функции, которую я даю, требуется массив из 2N 2 массивов из 2 элементов; каждый массив из 2 элементов представляет собой координату (x, y). Координаты используются следующим образом:

 points[0]: starting point of the curve
points[1]: lies on a line tangent to the beginning of the 1st bezier curve
points[2]: lies on a line tangent to the end of the 1st bezier curve
points[3]: end of 1st bezier curve, start of 2nd bezier curve
points[4]: lies on a line tangent to the end of the 2nd bezier curve
points[5]: end of 2nd bezier curve, start of 3rd curve
...
points[2*K 2]: lies on a line tangent to the end of the Kth bezier curve
points[2*K 3]: end of Kth bezier curve, start of (K 1)th

Я думаю, что аналогичную функцию для quadraticCurveTo было бы нетрудно написать.