用Graphics的 drawPath 来画曲线（1）

来源：互联网发布：nodejs 商城源码编辑：程序博客网时间：2024/05/16 16:10

1 用最简单的代码画一条最简单的曲线

代码在这里：

注意：Graphics的 drawPath 需要 flash player10

package
{
    import flash.display.GraphicsPathCommand;
    import flash.display.Sprite;

    public class drawCurveLine0 extends Sprite
    {
        public function drawCurveLine0()
        {
            super();
            graphics.lineStyle(0, 0x000000);
            var data:Vector.<Number>=new Vector.<Number>();
            data.push(200, 200); graphics.drawCircle(200, 200, 10);//起点
            data.push(250, 100); graphics.drawCircle(250, 100,5);//控制点1

            data.push(300, 200); graphics.drawCircle(300, 200, 10);//节点2
            data.push(400, 250); graphics.drawCircle(400, 250,5);//控制点2

            data.push(300, 300);
            data.push(250, 400);
            data.push(200, 300);
            data.push(100, 250);
            data.push(200, 200);

            var commands:Vector.<int>=new Vector.<int>();
            commands.push(GraphicsPathCommand.MOVE_TO);
            commands.push(GraphicsPathCommand.CURVE_TO);//样式:曲线
            commands.push(GraphicsPathCommand.CURVE_TO);
            commands.push(GraphicsPathCommand.CURVE_TO);
            commands.push(GraphicsPathCommand.CURVE_TO);

            graphics.drawPath(commands, data);//画路径

        }

    }
}

看明白了么？

就是定义一堆点的数组，再定义一个每两个点之间线型的数组，然后drawPath。

很简单吧，很简洁吧。

另：如果用GraphicsPathCommand.CURVE_TO，

貌似会认为你的节点数组里的点的作用为：

节点1，控制点1，节点2，控制点2，节点3.。。。。。。。。。。。

如果用GraphicsPathCommand.LINE_TO，则是画折现，点数组中点的含义变为：

节点1，节点2，节点3. 节点4，节点5。。。。。。。。。

明天请看用Graphics的 drawPath 来画曲线（2），实现鼠标拖动节点和控制点的功能。