Функция пути Безье по нескольким точкам с нативным JavaScript - PullRequest
Новая
       13

Функция пути Безье по нескольким точкам с нативным JavaScript

0 голосов
/ 02 октября 2019

Мне нужна функция Безье по нескольким пунктам и разделить ее на несколько шагов. Представьте себе пиратскую карту с пунктирной линией :) У меня есть одна черта (некоторые экранные объекты с положением и поворотом x / y) для построения этой карты

Я нашел методы холста .quadraticCurveTo() и т. Д., Но мне нужны конкретныефункция для разделения кривой на шаги

Я использовал ранее нативную функцию для базовой кривой Безье 

function bezier(t, p0, p1, p2, p3){
  var cX = 3 * (p1.x - p0.x),
      bX = 3 * (p2.x - p1.x) - cX,
      aX = p3.x - p0.x - cX - bX;

  var cY = 3 * (p1.y - p0.y),
      bY = 3 * (p2.y - p1.y) - cY,
      aY = p3.y - p0.y - cY - bY;

  var x = (aX * Math.pow(t, 3)) + (bX * Math.pow(t, 2)) + (cX * t) + p0.x;
  var y = (aY * Math.pow(t, 3)) + (bY * Math.pow(t, 2)) + (cY * t) + p0.y;

  return {x: x, y: y};
}

Но я не знаю, могу ли я использовать это для моей проблемы, потому что у меня только начальныймассив с простыми точками [{x:0, y:0}, {x:-30, y:-50}, {x:-10, y:-100}, {x:-30, y:-150}] (без контрольных точек Безье)

Пожалуйста, помогите мне рассчитать контрольные точки для мягкого пути

1 Ответ

0 голосов
/ 02 октября 2019

Вы можете создать контрольные точки для точки на основе точек до и после: 

function cp(a, b, c) {
  if (!a || !c) return b;
  return {
    x: b.x + (c.x - a.x) * .25,
    y: b.y + (c.y - a.y) * .25
  };
}

и соответствующих функций Безье 

function bezier4(t,a,b,c,d) {
  var u = 1-t, fa = u*u*u, fb = 3*u*u*t, fc = 3*u*t*t, fd = t*t*t;
  return {
    x: a.x*fa + b.x*fb + c.x*fc + d.x*fd
    y: a.y*fa + b.y*fb + c.y*fc + d.y*fd
  };
}

function bezier(t, ...points) {
  var last = points.length-1;
  t *= last;

  if(t <= 0) return points[0];
  if(t >= last) return points[last];
  var i = Math.floor(t);
  if(t === i) return points[i];

  return bezier4(
    t-i,
    points[i],
    cp(points[i-1], points[i], points[i+1]),
    cp(points[i+2], points[i+1], points[i]),
    points[i+1]
  );
}

и небольшой фрагмент, принимающий точкии создание SVG. 

var points = [{x:0, y:0}, {x:-30, y:-50}, {x:-10, y:-100}, {x:-30, y:-150}];

function cp(a, b, c) {
  if (!a || !c) return b;
  return {
    x: b.x + (c.x - a.x) * .25,
    y: b.y + (c.y - a.y) * .25
  };
}

var pointsWithControlPoints = points.flatMap((pt, i) => [
    cp(points[i + 1], pt, points[i - 1]),
    pt,
    cp(points[i - 1], pt, points[i + 1]),
  ])
  .slice(1, -1) // remove the control points before the first point and after the last one
  .map(pt => [pt.x, pt.y]);

var bounds = points.reduce((bounds, pt) => {
  bounds.top = Math.min(bounds.top, pt.y);
  bounds.left = Math.min(bounds.left, pt.x);
  bounds.bottom = Math.max(bounds.bottom, pt.y);
  bounds.right = Math.max(bounds.right, pt.x);
  return bounds;
}, {
  top: points[0].x,
  left: points[0].y,
  bottom: points[0].x,
  right: points[0].y
});
bounds.width = bounds.right - bounds.left;
bounds.height = bounds.bottom - bounds.top;

document.body.innerHTML = `<svg 
  viewBox="${bounds.left-10} ${bounds.top-10} ${bounds.width+20} ${bounds.height+20}"
  width="${bounds.width+20}"
  height="${bounds.height+20}"
>
  <path fill="none" 
    stroke="black" 
    stroke-dasharray="4" 
    d="M${pointsWithControlPoints[0]}C${pointsWithControlPoints.slice(1)}" 
    />
  ${points.map(pt => `<rect x="${pt.x - 4}" y="${pt.y - 4}" width="8" height="8" />`).join("\n")}
</svg>`;
...