在actionscript3中分割贝塞尔曲线

Question

我想“生长”一条带有贝塞尔曲线的路径。绘制路径后，它应该有点摇晃：类似编织的外观和感觉。 视觉示例： 编织示例 目前，我使用 TweenMax.bezier，它允许我沿着这条曲线移动一个点，同时（onEnterFrame）我将线条绘制到该点的当前位置。 不幸的是，如果帧速率下降（方形切割），这种方法会导致曲线质量较差，并且很难重新计算之间的所有点（对于编织效果）； 最近的建议引导我使用曲线来解决问题，但我不知道具体如何做。 这个例子可以解决我的问题： split bezier 但没有代码片段。

有人遇到同样的问题吗？ 提前致谢

Answer 1

我经常使用 Tweeners CurveModifiers._bezier_get 来轻松创建贝塞尔曲线并检索点（我已经尝试过一些，这个实际上很快）。

...快速：

设置两个列出控制点的数组 (x,y)。

迭代每一帧以修改控制点的位置。

使用一些类似的代码重新绘制曲线：

for(var i:Number=0; i <1; i += precision)
{ 
   x = CurveModifiers._bezier_get(pathX[0], pathX[pathX.length - 1], t, pathX);
   y = CurveModifiers._bezier_get(pathY[0], pathY[pathY.length - 1], t, pathY);
   // ...graphics.lineTo(x,y)
}

编辑

在这里：

import caurina.transitions.*;
import caurina.transitions.properties.CurveModifiers;


addEventListener(Event.ENTER_FRAME, onEnterFrame);

function onEnterFrame(e:Event) 
{   
    modifyCurve();
    drawCurve();
}

// Control points

var pathX:Array = new Array(50,200,600,850);
var pathY:Array = new Array(50,200,100,350);


// growth related

var growth:Number=0;
var growthSpeed:Number=0.01;


/**
* Grows and draws the curve
*/
function drawCurve():void {

    const precision:Number = 0.001;

    var cx:Number,
        cy:Number;

    // grow (avoid making it more than one)

    if (growth<1) growth = Math.min(1, growth+growthSpeed);

    graphics.clear();
    graphics.lineStyle(1);

    for (var t:Number=0; t <growth; t += precision) {

        cx=CurveModifiers._bezier_get(pathX[0],pathX[pathX.length-1],t,pathX);
        cy=CurveModifiers._bezier_get(pathY[0],pathY[pathY.length-1],t,pathY);

        if (t==0) {
            graphics.moveTo(cx,cy);
        } else {
            graphics.lineTo(cx,cy);
        }
    }
}


var motion_t:Number = 0;
var motionSpeed:Number = Math.PI * 0.1;
var motionRadius:Number = 10*motionSpeed;


/**
* Creates a movement by transforming the control points
*/
function modifyCurve():void
{
    var len:int = pathX.length;

    motion_t += motionSpeed;

    for(var index:int = 1; index < len; index++)
    {
        // simple circular movement for each control point

        pathX[index] += Math.cos(motion_t + Math.PI * 2 / index) * motionRadius;
        pathY[index] += Math.sin(motion_t + Math.PI * 2 / index) * motionRadius;

    }
}

Answer 2

您正在寻找的算法通常称为 deCastlejau 算法。开花或极性标签是同一事物的更通用方法。