如何用抛物线找到二次曲线的控制点

How to find the control point of a quadratic curve using a parabola?

本文关键字：二次 曲线 控制 抛物线 何用      更新时间：2023-09-26

我不知道怎么画一个方程为y^2 = 4ax的抛物线

所以我有两个端点，即P0, P2，但是我不知道如何找到控制点来放置quadraticCurveTo()功能

要将二次Bezier与此抛物线公式相匹配，并假设原点为0，您可以使用将控制点置于-y0或-y1，从其中一个端点开始。

<标题> 例子

首先，让我们重新排列公式:

y2 = 4ax

:

x = y2/4a

所以我们可以从下到下绘制。

在这种情况下，我们可以简单地简化所有内容，并使用y的倒数和x的中间作为控制点。

一般原则是求端点的切线。然后，这些线与控制点相交的地方应该放置。如果你想要关于如何找到交集的数学步骤，我建议你看看Erik Man在这里的答案(碰巧今天发布，但在数学上分解了更多细节)。

因此，如果我们在画布的窗口内绘制它(黑色是抛物线，红色是二次曲线):

var ctx = document.querySelector("canvas").getContext("2d"),
    w = ctx.canvas.width, h = ctx.canvas.height;
ctx.strokeStyle = "red";
ctx.lineWidth = 2;
ctx.translate(0, 6);
// formula
function f(y, a) {return y * y / (a * 4)};
var a = 80;
plotWindow();
function plotWindow() {
  
  ctx.clearRect(0, -6, w, h);
  ctx.fillStyle = "#000";
  
  // plot parabola using formula
  for(var i = 0; i < w; i++) {
    var y = f(i - w * 0.5, a);
    ctx.fillRect(i - 2, y - 2, 4, 4);
  }
  // plot parabola using quadratic curve:
  var x0 = 0;
  var y0 = f(-w * 0.5, a);
  var x1 = w;
  var y1 = f( w * 0.5, a);
  var cx = x1 * 0.5;  // control point is center for x
  var cy = -y0;       // control point is -y0 for y assuming top of parabola = 0
  ctx.beginPath();
  ctx.moveTo(x0, y0);
  ctx.quadraticCurveTo(cx, cy, x1, y1);
  ctx.stroke();
  
  // plot a
  ctx.fillStyle = "blue";
  ctx.fillRect(cx - 3, a - 3, 6, 6);
  ctx.fillText("a=" + a, cx + 6, a + 5)
}
// slider
document.querySelector("input").onchange = function() {
  a = +this.value;
  plotWindow();
};
canvas {border:1px solid #777}
<script src="https://cdn.rawgit.com/epistemex/slider-feedback/master/sliderfeedback.min.js"></script>
<label>a: <input type="range" min=10 max=172 value=80></label><br>
<canvas width=600 height=190></canvas>

相关文章：