通过在圆上拖动点来更改圆的形状

时间:2012-03-16 19:26:46

标签: actionscript-3 flash

我想创建一个圆圈,并在上面放8个点。因此,用户可以拖动每个点以改变它的形状。

有没有办法在flash中执行此操作?

我有以下代码:

参考。 - How to draw a continuous curved line from 3 given points at a time

package{import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.geom.Point;

public class SplineTest extends Sprite
{
    // ====================================================================
    private const A:Point = new Point(0, 0);
    private var B:Point = new Point(100, 200); // yes, var.. this will change
    private const C:Point = new Point(200, 0);

    private const D:Point = C.subtract(A); // midpoint between A and C (I normalize it in the constructor)
    private var DB:Point;

    private var controlPoint:Sprite;
    private var curveCanvas:Sprite;
    private var move:Boolean = false;
    // ====================================================================

    // ====================================================================
    // CONSTRUCTOR
    // ====================================================================

    // --------------------------------------------------------------------
    public function SplineTest()
    {
        // normalize D to be the midpoint
        D.normalize(D.length * 0.5);

        // draw A and C
        graphics.beginFill(0xFF0000);
        graphics.drawCircle(A.x, A.y, 5);
        graphics.drawCircle(C.x, C.y, 5);
        graphics.endFill();
        // move the root for visual convinience
        x = y = 100;

        DB = B.subtract(D);

        // create the canvas for the curve and draw it!     
        curveCanvas = addChild(new Sprite()) as Sprite;
        drawTheCurve();

        // create the controlPoint (B) and draw it!
        controlPoint = curveCanvas.addChild(new Sprite()) as Sprite;
        controlPoint.graphics.beginFill(0xFF0000);
        controlPoint.graphics.drawCircle(0, 0, 5);
        controlPoint.x = B.x;
        controlPoint.y = B.y;

        // add listeners to important events (for moving the control point)
        controlPoint.addEventListener(MouseEvent.MOUSE_DOWN, mouseDown);
        stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMove);
        controlPoint.addEventListener(MouseEvent.MOUSE_UP, mouseUp);
    }

    // --------------------------------------------------------------------
    private function drawTheCurve():void
    {
        with (curveCanvas.graphics)
        {
            clear();

            // draw the curve
            lineStyle(1, 0);
            moveTo(A.x, A.y);
            curveTo(B.x, B.y, C.x, C.y);

            // draw D and DB
            lineStyle(1, 0x00FF00);
            drawCircle(D.x, D.y, 5);
            moveTo(D.x, D.y);
            lineTo(D.x + DB.x, D.y + DB.y);
        }
    }

    // --------------------------------------------------------------------
    private function mouseDown(event:MouseEvent):void { move = true; }
    // --------------------------------------------------------------------
    private function mouseMove(event:MouseEvent):void
    {
        if (!move) return;

        // obtain the mouse position of B
        B = curveCanvas.globalToLocal(new Point(event.stageX, event.stageY));
        controlPoint.x = B.x;
        controlPoint.y = B.y;

        // if you run the next line the curve passes trough B
        calculatePoints();

        drawTheCurve();
    }
    // --------------------------------------------------------------------
    private function mouseUp(event:MouseEvent):void { move = false; }

    // --------------------------------------------------------------------
    private function calculatePoints():void
    {
        DB = B.subtract(D);
        B = B.add(DB);
    }
}}

那么,任何人都可以将这三条曲线转换为8点圆圈吗?

提前致谢..

1 个答案:

答案 0 :(得分:1)

这里有一篇帖子http://www.codereflections.com/blog/archives/tag/bezier-curves-as3-flash,您可以下载一些可能会指向正确方向的代码。