计算贝塞尔曲线下的面积

Question

我正在尝试找到该问题的直接答案，但是我发现的答案通常非常复杂，或者需要比所需逻辑更复杂的逻辑。 我的问题基于以下示例：

假设我有一系列观点。 它们都是非常温顺且可预测的，因为它们始终采用数学曲线模式... （它们始终从左下开始，从右上结束）

如何确定PHP中此曲线下的面积？

请注意，我尝试使用Canvas在Javascript中复制此示例，但不幸失败（使用类似这样的示例）

<?php
    //Example requires Imagick
    $width =  800;
    $height = 200;
    $img = new Imagick();
    $img->newImage( $width, $height, new ImagickPixel( 'transparent' ) );
    $draw = new ImagickDraw();
    $draw->setStrokeColor( new ImagickPixel( 'red' ) );
    $draw->setStrokeWidth(4 );
    $draw->setFillColor( new ImagickPixel( 'transparent' ) );
    $points = array
    ( 
        array( 'x' => 0, 'y' => 200 ), 
        array( 'x' => 100, 'y' => 0 ), 
        array( 'x' => 200, 'y' => 200 ), 
        array( 'x' => 300, 'y' => 0 ),
        array( 'x' => 400, 'y' => 10 ), 
        array( 'x' => 500, 'y' => 0 )
    );
    $draw->bezier($points);
    $img->drawImage( $draw );
    $img->setImageFormat( "png" );
    header( "Content-Type: image/png" );
    echo $img;
?>

我知道这个问题可能要花一些迭代的时间问我。。。我会发布一个JSFiddle来备份此示例并使其更易于使用，但是我无法将其转换为与js / bezierCurveTo一起使用，所以如果用户可以帮助它，它也是一个非常有用的替代品

Answer 1

MBo的解决方案将给出确切的答案，您也可以尝试使用数值解决方案。

由于您的曲线总是在x方向上增加，因此我们可以在x方向上对其进行切片，并近似于每个切片的面积。 例如，如果曲线上有四个点（x0，y0），（x1，y1），（x2，y2），（x3，y3），则使用

(x1-x0)*(y0+y1)/2

这是梯形的区域。 对每对点都做同样的事情，并将它们加起来。 如果您的x坐标均匀分布，则将给出梯形规则，我们可以简化该规则。 我们可以假设这里使用的是贝塞尔曲线。

如果我们有Bezier曲线，则事情会有些棘手，因为我们实际上并不知道曲线上的点。 MBo给出了积分的公式，一切都没有丢失

X(t) = P[0].X*(1-t)^3+3*P[1].X*t*(1-t)^2+3*P[2].X*t^2*(1-t)+P[3].X*t^3
Y(t) = P[0].Y*(1-t)^3+3*P[1].Y*t*(1-t)^2+3*P[2].Y*t^2*(1-t)+P[3].Y*t^3

P [0] .X是第一个控制点的x坐标，P [0] .Y是Y值，等等。在代码中，您需要使用

x = P[0].X*(1-t)*(1-t)*(1-t)+3*P[1].X*t*(1-t)*(1-t)+3*P[2].X*t*t*(1-t)+P[3].X*t*t*t;
y = P[0].Y*(1-t)*(1-t)*(1-t)+3*P[1].Y*t*(1-t)*(1-t)+3*P[2].Y*t*t*(1-t)+P[3].Y*t*t*t;

它使用乘法而不是幂。 使用0到1之间的多个t值来找到曲线上的点，然后找到切片。

我放了一个JavaScript小提琴，将所有这些放在一起http://jsfiddle.net/SalixAlba/QQnvm/

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

// The control points
var P = [{X:  13, Y: 224 }, 
     {X: 150, Y: 100 }, 
     {X: 251, Y: 224 }, 
     {X: 341, Y:  96 }, ];

ctx.lineWidth = 6;
ctx.strokeStyle = "#333";
ctx.beginPath();
ctx.moveTo(P[0].X, P[0].Y);
ctx.bezierCurveTo(P[1].X, P[1].Y, P[2].X, P[2].Y, P[3].X, P[3].Y);
ctx.stroke();

// draw the control polygon
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(P[0].X, P[0].Y);
ctx.lineTo(P[1].X, P[1].Y);
ctx.lineTo(P[2].X, P[2].Y);
ctx.lineTo(P[3].X, P[3].Y);
ctx.stroke();

function findarea(n) {
ctx.lineWidth = 3;
ctx.strokeStyle = "#f00";
ctx.beginPath();

var nSteps = n - 1;
var x = [P[0].X];
var y = [P[0].Y];
ctx.moveTo(x[0], y[0]);

var area = 0.0;
for (var i = 1; i <= nSteps; ++i) {
    var t = i / nSteps;
    x[i] = P[0].X*(1-t)*(1-t)*(1-t)+3*P[1].X*t*(1-t)*(1-t)+3*P[2].X*t*t*(1-t)+P[3].X*t*t*t;
    y[i] = P[0].Y*(1-t)*(1-t)*(1-t)+3*P[1].Y*t*(1-t)*(1-t)+3*P[2].Y*t*t*(1-t)+P[3].Y*t*t*t;
    ctx.lineTo(x[i], y[i]);

    area += (x[i] - x[i-1]) * (y[i-1] + y[i]) / 2;

    if(x[i]<x[i-1]) alert("Not strictly increasing in x, area will be incorrect");
}
ctx.stroke();
$("#area").val(area);
}

$("#goBut").click(function () {
    findarea($("#nPts").val());
});

Answer 2

您可以使用公式计算参数曲线下的面积

A = Integral[t0..t1] (y(t)*x'(t)*dt)

对于三次方贝塞尔曲线：（我不确定您使用的是哪种贝塞尔曲线）

Area = Integral[0..1](y(t)*x'(t)*dt)=
Integral[0..1](
(P[0].Y*(1-t)^3+3*P[1].Y*t*(1-t)^2+3*P[2].Y*t^2*(1-t)+P[3].Y*t^3)*
(P[0].X*(1-t)^3+3*P[1].X*t*(1-t)^2+3*P[2].X*t^2*(1-t)+P[3].X*t^3)'*
dt)

您必须展开方括号，区分第二行表达式，将表达式相乘并积分结果

枫木作品（很难复制没有扭曲的文本）： 请注意，某些表达式已多次使用