javascript - html二次曲线上的中心点

Question

我使用 context.quadraticCurveTo(controlX, controlY, endX, endY); 在 html Canvas 上绘制了一条二次曲线。

我有控制点和起点和终点，它们在水平方向上不一定彼此齐平。

如何使用这些参数找到曲线的中心点？

其实我想在这个中心点上放一个div标签。 这个过程有没有解方程？

Answer 1

quadraticCurveTo 绘制一个 quadratic Bézier curve .

计算曲线上任意给定位置(从0到1)点坐标的公式为

x(t) = (1-t)^2 * x1 + 2 * (1-t) * t * x2 + t^2 * x3
y(t) = (1-t)^2 * y1 + 2 * (1-t) * t * y2 + t^2 * y3

其中 (x1, y1) 是起点，(x2, y2) 是控制点，(x3, y3) 是终点。

因此，将其转换为 JavaScript，我们最终得到类似的东西

function _getQBezierValue(t, p1, p2, p3) {
    var iT = 1 - t;
    return iT * iT * p1 + 2 * iT * t * p2 + t * t * p3;
}

function getQuadraticCurvePoint(startX, startY, cpX, cpY, endX, endY, position) {
    return {
        x:  _getQBezierValue(position, startX, cpX, endX),
        y:  _getQBezierValue(position, startY, cpY, endY)
    };
}

如果您将开始点、结束点和控制点传递给那里的 getQuadraticCurvePoint，以及中间位置的 0.5，您应该得到一个具有 X 和 Y 坐标的对象.

例子

function _getQBezierValue(t, p1, p2, p3) {
  var iT = 1 - t;
  return iT * iT * p1 + 2 * iT * t * p2 + t * t * p3;
}

function getQuadraticCurvePoint(startX, startY, cpX, cpY, endX, endY, position) {
  return {
    x: _getQBezierValue(position, startX, cpX, endX),
    y: _getQBezierValue(position, startY, cpY, endY),
  };
}

var position = 0.0;
var startPt = { x: 120, y: 10 };
var controlPt = { x: 410, y: 250 };
var endPt = { x: 10, y: 450 };
var canvas = document.getElementById("c");
var ctx = canvas.getContext("2d");
function drawNextPoint() {
  var pt = getQuadraticCurvePoint(
    startPt.x,
    startPt.y,
    controlPt.x,
    controlPt.y,
    endPt.x,
    endPt.y,
    position,
  );
  position = (position + 0.006) % 1.0;

  ctx.fillStyle = "rgba(255,0,0,0.5)";
  ctx.fillRect(pt.x - 2, pt.y - 2, 5, 5);
}

ctx.strokeStyle = "black";
ctx.moveTo(startPt.x, startPt.y);
ctx.quadraticCurveTo(controlPt.x, controlPt.y, endPt.x, endPt.y);
ctx.stroke();

setInterval(drawNextPoint, 40);

<canvas id="c" width="500" height="500">