原本此文应写在ws_25line挑战赛之前,但一直由于时间关系,没有能及时完成,还好现在可以使用此文对ws_25line挑战赛做一总结.如果你还不知ws_25line挑战赛可以在访问下面的地址来这里查看或是参与投票.J

从Flashmx版本开始Flash的绘画能力有了很大的改进,当然包括Flash Drawing Api.使用Flash Drawing Api的好处就是我们通过flash的创作环境,动态的去绘制图形,添充色彩,等等.同时,对于程序员人员来使用flashDrawing Api用最少的代码,最小的文件量来生成比较酷的效果,是一件很得意的事。

Ok.我们书说简单，Flash Drawing Api是指在Flash创作环境中的绘画的接口方法。你只要能够灵活的运用这些方法，就可以在flash中自由的绘制了。
绘画方法：
下面是Flash中的绘画方法：

·    MovieClip.beginFill() //添充实色
·    MovieClip.beginGradientFill() //开始渐变添充
·    MovieClip.clear() //清除
·    MovieClip.curveTo() //绘制曲线
·    MovieClip.endFill() //结束添充
·    MovieClip.lineStyle() //线条样式
·    MovieClip.lineTo() //绘制直线
·    MovieClip.moveTo() //移动坐标

这些绘画方法可以用在flash中的任意movieclip上，并且我们可以在运行状态下进行绘画。

任何影片剪辑中都有一个虚拟的钢笔,定位在movieclip的0,0点位置,因为我们没有设置线条的粗细和添充色彩,所以它是看不见的。那么下面我们就来打开这个虚拟钢笔工具，并进行绘制。
绘制线条:
方法：
1.    新建一个文件,命名为drawline.fla.
2.    在场景中创建一个按钮，实例名为drawbtn.并将它放在场景中的最底层。
3.    新增一层命名actionscript.在其中输入代码：

drawbtn.onRelease= function(){
    _root.lineStyle(1,0xff0000,100);
    _root.lineTo(200,150);
} 

4,测试影片结果如下
basic_draw.swf

下面我们来解说代码：在按钮当中我们只使用了两行代码,在之前我们提到任何movieclip当中都有一个虚拟钢笔，因为没有设置线条所以我们看不见，所以我们需要先设置线条样式，确保我们可以看见虚拟钢笔绘制出的图形。

_root.lineStyle(1,0xff0000,100); 

在这一行中，我们把_root当作当前的movieclip,你也可以换作其它的，lineStyle 方法中的1---线条精细
0xff0000---添充的色彩，
100---线条的透明度
第二行，lineTo(200,150)
因为任何影片剪辑的虚拟钢笔默认位置都在0,0点，并且我们都道两点确定一条直线，所以我们只需要确定结束点的位置坐标200,150,就可以了。当然如果你需要移动起始点的位置时，你可以使用moveTo来操作。
这是我们学到的第一个，也是最简单的绘制线条方法。
接下来我们要根据这个方法来看一下如何去变通的使用它。
鼠标绘制线条１
先看效果：
mouse_draw1.swf

这个效果的实现实际上非常非常的简单，因为你已经知道了两点确定一条直线，我们只要用光标控制另一点就会变得很容易。
代码如下：

function drawline() {
    this.lineStyle(1, 0xff0000, 100);
    this.lineTo(_xmouse, _ymouse);
}
drawbtn.onRelease = function() {
    onEnterFrame = drawline;
}; 

原来定义在按钮上的两行代码我们将它写在一个函数中，为了是方便调用。 当点击按钮时，我们使用onEnterFrame循环不断去调用它。实际上我们只是修改了一行代码，将原先的lineTo(200,150)变为 lineTo(_xmouse,_ymosue),注意将影片的帧频设为30会光滑许多。
鼠标绘制线条2
先看效果
mosue_draw2.swf

在这个效果中，我们想要实现的绘制一条一端跟随着光标的直线条。我们在试着使用moveTo和clear(),
movieClip.movieTo()可以帮助我们移动绘画的起始点，movieClip.clear(),用来清除之前绘制的内容。
代码如下所示：

function drawline() {
　　//清除之前绘制的内容
    this.clear();
    //移动起始点到200,0的位置
    this.moveTo(200,0);
    //设置绘制线条的样式
    this.lineStyle(1, 0xff0000, 100);
   //跟随光标绘制
    this.lineTo(_xmouse, _ymouse);
}
drawbtn.onRelease = function() {
    onEnterFrame = drawline;
}; 

我们只是在上一范例中增加了两行代码，this.clear()用来清除之前绘制的内容，this.moveTo(200,0)用来移动起始点的位置。需要注意的是this.clear()的位置，放在函数内部的前面和后面是有区别的。
鼠标绘制线条３
接下来我们要看一下随机函数Math.random()在绘制线条中的应用。
先看演示：
mouse-draw3.swf

代码如下：

function drawline() {
    //this.clear();
    this.moveTo(200,200);
    this.lineStyle(3, Math.random()*0xff0000+0xffffff, Math.random()*100+10);
    this.lineTo(_xmouse, _ymouse);
}
drawbtn.onRelease = function() {
    onEnterFrame = drawline;
}; 

这里需要注意的是随机会，Math.random()本身值的范围为0-0.999,如果你想设定在10-100的范围内随机，则应为Math.random()*100+10;代码中我们指设定的了色彩和渐变为随机数值，你当然还可以指线条的粗细为承机值。

鼠标绘制线条4
接下来我看一下比较实用的绘制线条，通常我们可以使用它来制绘图板
演示：mouse_draw4.swf

代码如下：

//新建一个影片剪辑名为myClip
createEmptyMovieClip("myClip", 1);
onMouseDown = function () {
   //当点击时，设置线条的样式，此处色彩为随机
    myClip.lineStyle(3, Math.random()*0xff0000+0xffff00, 100);
　//移动myClip的位置到光标所在的位置
    myClip.moveTo(_xmouse, _ymouse);
    onMouseMove = function () {
　　　　//当光标移动时开始绘制
        myClip.lineTo(_xmouse, _ymouse);
    };
};
onMouseUp = function () {
    //当释放鼠标时，停止绘制
    onMouseMove = null;
};
drawbtn.onRelease = function() {
    myClip.clear();
}; 

在这段代码中，如果你与之前的比较，我们的目的无非是把线条的起始点移到了光标的所在位置。并且的鼠标的事件来操作而已。其它的基本上没有什么变化。

操作控制点
接下来我们看一下对直线两个端的控制。
演示：control_draw1.swf

代码如下：

//在主场景中贴加两个小圆点用于拖动。
this.attachMovie("sign","sign1",100);
this.attachMovie("sign","sign2",101);
//设置小圆点的位置
sign1._x =100;
sign1._y =150;
sign2._x =320;
sign2._y =150;
//创建一个空的影片剪辑，用于在其中绘制，也可以直接在主场景中绘制。
createEmptyMovieClip("myClip",1);
function drawline(){
    myClip.clear();
    //第一端点移到sign1的坐标位置
myClip.moveTo(sign1._x,sign1._y);
    myClip.lineStyle(2, Math.random()*0xff0000+0xffff00, 100);
    //第二端点绘制到sign2的位置
    myClip.lineTo(sign2._x,sign2._y);
}
// 调用函数
drawline();
//下面代码是用于拖动圆点的。
sign1.onPress = function(){
    this.startDrag();
    onEnterFrame = drawline;
}
sign1.onRelease = function(){
    this.stopDrag();
}
sign2.onPress = function(){
    this.startDrag();
    onEnterFrame = drawline;
}
sign2.onRelease = function(){
    this.stopDrag();
} 

在上面的代码中，我们只是将直线的两个端点指定为两个小圆点的位置坐标，然后设定两个小圆点可以拖动即可。

操作控制点2
如果上例你可以明白，接下来我们仍使用上例来绘制矩形。道理是一样的。
演示：control_draw2.swf

代码如下：

this.attachMovie("sign","sign1",100);
this.attachMovie("sign","sign2",101);
this.attachMovie("sign","sign3",102);
this.attachMovie("sign","sign4",103);
sign1._x =100;
sign1._y =80;
sign2._x =320;
sign2._y =80;
sign3._x = 320;
sign3._y =220;
sign4._x = 100;
sign4._y = 220;
createEmptyMovieClip("myClip",1);
function drawline(){
    myClip.clear();
    myClip.moveTo(sign1._x,sign1._y);
    myClip.lineStyle(2, Math.random()*0xff0000+0xffff00, 100);
    myClip.lineTo(sign2._x,sign2._y);
    myClip.lineTo(sign3._x,sign3._y);
    myClip.lineTo(sign4._x,sign4._y);
    myClip.lineTo(sign1._x,sign1._y);
}
drawline();

sign1.onPress =sign2.onPress=sign3.onPress=sign4.onPress= function(){
    this.startDrag();
    onEnterFrame = drawline;
}
sign1.onRelease =sign2.onRelease=sign3.onRelease=sign4.onRelease = function(){
    this.stopDrag();
} 

PS By egoldy：此教程只是flash Drawing Api中的lineTo,moveTo,lineStyle的应用，只是其中的很小很小的一部分理解和应用。所有的例子都相对的简单，只是想通过此教程来 说明方法是一样的，只要稍加变通可能效果就会大不一样。下一篇，曲线。Cheers.

讨论此教程

源文件下载