1

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

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

4

2 回答 2

2

我经常使用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;

    }
}
于 2010-03-16T13:40:23.863 回答
0

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

于 2010-03-16T15:45:40.730 回答