我不知道如何绘制方程为y^2 = 4ax
的抛物线
所以我有两个端点,即 P0、P2,但是我不知道如何找到控制点以放入 quadraticCurveTo()
函数中。
最佳答案
要将二次贝塞尔曲线与此抛物线公式匹配,并假设原点为 0,您可以将控制点放置在从一端开始的 -y0
或 -y1
处点。
示例
首先,让我们重新排列一下公式:
y2 = 4ax
至:
x = y2 / 4a
这样我们就可以从下往下绘制。
在这种情况下,我们可以简单地归结所有内容并使用 y 的倒数和中 x 作为控制点。
一般原则是找到端点的切线。然后,应将控制点放置在这些线相交的位置。如果您想要有关如何找到交集的数学步骤,我建议您查看 Erik Man 的答案 here (它恰好是今天发布的,但更详细地分解了数学)。
因此,如果我们将其绘制在 Canvas 的窗口内(黑色是抛物线,红色是二次曲线):
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>
关于javascript - 如何使用抛物线找到二次曲线的控制点?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30599097/