расщепление кривой Безье в actionscript3 - PullRequest
Новая
       34

расщепление кривой Безье в actionscript3

1 голос
/ 16 марта 2010

Я бы хотел «вырастить» путь с помощью кривых Безье. После того, как путь прорисован, он должен немного дрожать: похожий на плетение внешний вид. визуальный пример: пример плетения В данный момент я использую TweenMax.bezier, который позволяет мне перемещать точку вдоль этой кривой, и в то же время (onEnterFrame) я рисую линии для текущего положения точки. К сожалению, этот подход приводит к плохому качеству кривой, если частота кадров падает (квадратный срез), и трудно пересчитать все промежуточные точки (для эффекта плетения); Недавние предложения заставляют меня использовать кривые для решения проблемы, но я не знаю точно, как. Этот пример решит мою проблему: split bezier Но никаких фрагментов кода.

Кто-нибудь сталкивался с такой же проблемой? Заранее спасибо

Ответы [ 2 ]

2 голосов
/ 16 марта 2010

Я часто использую 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;

    }
}
0 голосов
/ 16 марта 2010

То, что вы ищете, чаще всего называется алгоритмом деКастлехау. Цветущие или полярные метки являются более общими методами для одной и той же вещи.

...