Question

我在2D中有三个点，我想绘制一条穿过它们的二次贝塞尔曲线。如何在quadTo中计算中间控制点（x1和y1）？我知道大学的线性代数但需要一些简单的帮助。

如何计算中间控制点，以便曲线也通过它？

Answer 1

设P0，P1，P2为控制点，Pc为您希望曲线通过的固定点。

然后贝塞尔曲线由

定义

P(t) = P0*t^2 + P1*2*t*(1-t) + P2*(1-t)^2

...其中t从零变为1.

你的问题有无数的答案，因为它可能会通过你的点来获得任何t值...所以只需选择一个，如t = 0.5，并解决P1：

Pc = P0*.25 + P1*2*.25 + P2*.25

P1 = (Pc - P0*.25 - P2*.25)/.5

   = 2*Pc - P0/2 - P2/2

“P”值是（x，y）对，所以只需对x应用一次方程式，对y应用一次：

x1 = 2*xc - x0/2 - x2/2
y1 = 2*yc - y0/2 - y2/2

...其中（xc，yc）是您希望它通过的点，（x0，y0）是起点，（x2，y2）是终点。这将为您提供一个在t = 0.5时通过（xc，yc）的Bezier。

Answer 2

我在我的JavaFX应用程序中使用了Nemos答案，但我的目标是绘制曲线，以便曲线的视觉转折点始终适合选择的固定曲线（CP）。

CP = ControlPoint
SP = StartPoint
EP =终点
BP（t）=BeziérCurve上的变量点，其中t介于0和1之间

为了达到这个目的，我做了一个变量t（不是固定0.5）。如果选择的点CP不再位于SP和EP之间的中间位置，则必须稍微向上或向下变化。作为第一步，您需要知道CP是否更接近SP或EP：设distanceSP为CP与SP之间的距离和distanceEP CP和EP之间的距离然后我将比率定义为：

ratio = (distanceSP - distanceEP) / (distanceSP + distanceEP);

现在我们将使用它来改变t：

ratio = 0.5 - (1/3) * ratio;

注意：这仍然是近似值，尝试和错误选择1/3。

这是我的Java函数：（Point2D是一类JavaFX）

private Point2D adjustControlPoint(Point2D start, Point2D end, Point2D visualControlPoint) {
    // CP = ControlPoint, SP = StartPoint, EP = EndPoint, BP(t) = variable Point on BeziérCurve where t is between 0 and 1
    // BP(t) = SP*t^2 + CP*2*t*(1-t) + EP*(1-t)^2
    // CP = (BP(t) - SP*t^2 - EP*(1-t)^2) / ( 2*t*(1-t) )
    // but we are missing t the goal is to approximate t
    double distanceStart  = visualControlPoint.distance(start);
    double distanceEnd    = visualControlPoint.distance(end);
    double ratio          = (distanceStart - distanceEnd) / (distanceStart + distanceEnd);
    // now approximate ratio to be t
    ratio = 0.5 - (1.0 / 3) * ratio;

    double ratioInv = 1 - ratio;
    Point2D term2 = start.multiply( ratio * ratio );
    Point2D term3 = end.multiply( ratioInv * ratioInv );
    double  term4 = 2 * ratio * ratioInv;

    return visualControlPoint.subtract(term2).subtract(term3).multiply( 1 / term4);
}

我希望这会有所帮助。

Answer 3

让我们想要的四边形贝塞尔曲线为 P(t) = P1t^2 + PC2t(1-t) + P2*(1- t)^2 还有那个四贝塞尔传球P1,Pt,P2

通过三个点 P1、Pt、P3 的最佳四边形贝塞尔曲线具有控制点 PC，其张力指向曲线切线的垂线。那一点也是那个贝塞尔曲线的平分线。在通过 throw PC 和 Pt 的矩形线上以 PC 开始 P1 和结束 P3 的任何贝塞尔曲线都会以相同的参数 t 值切割四边形贝塞尔曲线。

PC 点未通过贝塞尔曲线的参数位置 t=.5 实现。一般来说，对于任何 P1、Pt、P2，我们都得到了一个 Pc，如下一个公式所述。

得到的 PC 也是那个贝塞尔曲线到 Pt 的近点，通过 Pt 和 Pc 的直线是三角形 P1, Pt, Pc 的平分线。

这是描述定理和公式的论文 - 位于我的网站 https://microbians.com/math/Gabriel_Suchowolski_Quadratic_bezier_through_three_points_and_the_-equivalent_quadratic_bezier_(theorem)-.pdf

还有代码

(function() {

    var canvas, ctx, point, style, drag = null, dPoint;

    // define initial points
    function Init() {
        point = {
            p1: { x:200, y:350 },
            p2: { x:600, y:350 }
        };
        point.cp1 = { x: 500, y: 200 };
        
        // default styles
        style = {
            curve:  { width: 2, color: "#333" },
            cpline: { width: 1, color: "#C00" },
            curve1: { width: 1, color: "#2f94e2" },
            curve2: { width: 1, color: "#2f94e2" },
            point: { radius: 10, width: 2, color: "#2f94e2", fill: "rgba(200,200,200,0.5)", arc1: 0, arc2: 2 * Math.PI }
        }
        
        // line style defaults
        ctx.lineCap = "round";
        ctx.lineJoin = "round";

        // event handlers
        canvas.onmousedown = DragStart;
        canvas.onmousemove = Dragging;
        canvas.onmouseup = canvas.onmouseout = DragEnd;
        
        DrawCanvas();
    }
    
    
    // draw canvas
    function DrawCanvas() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        // control lines
        ctx.lineWidth = style.cpline.width;
        ctx.strokeStyle = style.cpline.color;
        ctx.beginPath();
        ctx.moveTo(point.p1.x, point.p1.y);
        ctx.lineTo(point.cp1.x, point.cp1.y);
        ctx.lineTo(point.p2.x, point.p2.y);
        ctx.stroke();
        
        // curve
        ctx.lineWidth = style.curve.width;
        ctx.strokeStyle = style.curve.color;
        ctx.beginPath();
        ctx.moveTo(point.p1.x, point.p1.y);

        through = !document.getElementById("cbThrough").checked;
        if(through)
        {
            tmpx1 = point.p1.x-point.cp1.x;
            tmpx2 = point.p2.x-point.cp1.x;
            tmpy1 = point.p1.y-point.cp1.y;
            tmpy2 = point.p2.y-point.cp1.y;
            dist1 = Math.sqrt(tmpx1*tmpx1+tmpy1*tmpy1);
            dist2 = Math.sqrt(tmpx2*tmpx2+tmpy2*tmpy2);
            tmpx = point.cp1.x-Math.sqrt(dist1*dist2)*(tmpx1/dist1+tmpx2/dist2)/2;
            tmpy = point.cp1.y-Math.sqrt(dist1*dist2)*(tmpy1/dist1+tmpy2/dist2)/2;
            ctx.quadraticCurveTo(tmpx, tmpy, point.p2.x, point.p2.y);
        }
        else
        {
            ctx.quadraticCurveTo(point.cp1.x, point.cp1.y, point.p2.x, point.p2.y);
        }
        
        ctx.stroke();
        
        //new, t range is [0, 1]
        ctx.beginPath();
        ctx.lineWidth = style.curve1.width;
        ctx.strokeStyle = style.curve1.color;
        
        ctx.moveTo(point.p1.x, point.p1.y);
        
        // control points
        for (var p in point) {
            ctx.lineWidth = style.point.width;
            ctx.strokeStyle = style.point.color;
            ctx.fillStyle = style.point.fill;
            ctx.beginPath();
            ctx.arc(point[p].x, point[p].y, style.point.radius, style.point.arc1, style.point.arc2, true);
            ctx.fill();
            ctx.stroke();
        }
    }
    
    // start dragging
    function DragStart(e) {
        e = MousePos(e);
        var dx, dy;
        for (var p in point) {
            dx = point[p].x - e.x;
            dy = point[p].y - e.y;
            if ((dx * dx) + (dy * dy) < style.point.radius * style.point.radius) {
                drag = p;
                dPoint = e;
                canvas.style.cursor = "move";
                return;
            }
        }
    }
    
    
    // dragging
    function Dragging(e) {
        if (drag) {
            e = MousePos(e);
            point[drag].x += e.x - dPoint.x;
            point[drag].y += e.y - dPoint.y;
            dPoint = e;
            DrawCanvas();
        }
    }
    
    
    // end dragging
    function DragEnd(e) {
        drag = null;
        canvas.style.cursor = "default";
        DrawCanvas();
    }

    
    // event parser
    function MousePos(event) {
        event = (event ? event : window.event);
        return {
            x: event.pageX - canvas.offsetLeft,
            y: event.pageY - canvas.offsetTop
        }
    }
    
    
    // start
    canvas = document.getElementById("canvas");
    if (canvas.getContext) {
        ctx = canvas.getContext("2d");
        Init();
    }
    
})();

html, body { background-color: #DDD;font-family: sans-serif; height: 100%; margin:0;
padding:10px;
}
canvas { display:block;}
#btnControl { font-size:1em; position: absolute; top: 10px; left: 10px; }
#btnSplit { font-size:1em; position: absolute; top: 35px; left: 10px; }
#text { position: absolute; top: 75px; left: 10px; }
a {
  text-decoration: none;
  font-weight:700;
  color: #2f94e2;
}
#little { font-size:.7em; color:#a0a0a0; position: absolute; top: 775px; left: 10px; }

<h1>Quadratic bezier throw 3 points</h1>
<div>
  
  Also take a look the the math paper <a target="_blank" href="https://microbians.com/mathcode">Quadratic bezier through three points! →</a> <br/><br/>
  Gabriel Suchowolski (<a href="https://microbians.com" target="_blank">microbians</a>), December, 2012
</div>
<div id="little">Thanks to 艾蔓草 xhhjin for the code (that I fork) implementing my math paper.</div>
  <br/>
</div>
<input type="checkbox" id="cbThrough" name="through"/>Primitive quadratic Bezier (as control points)</input><br/><br/>
<canvas id="canvas" height="500" width="800" class="through" style="cursor: default; background-color: #FFF;"></canvas>

享受

Answer 4

如果你不想要确切的中间点，而你想要t（0到1）的任何值，那么等式是：

controlX = pointToPassThroughX/t - startX*t - endX*t;
controlY = pointToPassThroughY/t - startY*t - endY*t;

当然，这也适用于中点，只需将t设为0.5即可。简单！： - ）

通过三个给定点绘制二次Bézier曲线

4 个答案: