在动作3中分割贝塞尔曲线

Question

我想用bezier曲线“成长”一条路。绘制完路径后，它应该有点摇晃：编织般的外观和感觉。 视觉示例： weave example 目前我使用的是TweenMax.bezier，它允许我沿着这条曲线移动一个点，同时（onEnterFrame）我将线条绘制到Point的当前位置。 不幸的是，如果帧率下降（方形切割）并且难以重新计算其间的所有点（对于编织效果），这种方法会导致曲线质量不佳; 最近的建议让我使用曲线来解决问题，但我不确切知道如何。 这个例子可以解决我的问题：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算法。开花或极地标签是更常用的方法。