Flash Drawing Api-绘制线条(初级)

作者: egoldy

性质: 原创

阅读次数: 16501

发表时间: 2006-10-30 17:29:25


原本此文应写在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来操作。
这是我们学到的第一个,也是最简单的绘制线条方法。
接下来我们要根据这个方法来看一下如何去变通的使用它。
鼠标绘制线条1
先看效果:
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()的位置,放在函数内部的前面和后面是有区别的。
鼠标绘制线条3
接下来我们要看一下随机函数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.

 

讨论此教程

源文件下载

服务项目_SERVICE

关于我们

万博思图(北京)信息技术有限公司,专业的flash,flex开发团队,5年经验。公司致力于互联网上的业务的开展,对于互动网站行销,互联网应用程序开发有成熟的解决方案。我们关注互联网市场动态,关注新技术,更注重在新的领域不断探索发现。
万博思图业务内容主要包括企业品牌Flash网站开发,企业形象宣传Flash设计,动画,多媒体演示,Flex企业级应用程序开发,拥有众多成功案例,欢迎来电咨询。
 
COPYRIGHT BY WEBSTUDIO INTERACTIVE DESIGN Co.,Ltd. ALL RIGHTS RESERVED.
公司地址: 北京市朝阳区朝外SOHO D 座727室 邮编: 100026 EMAIL: WEBSTUDIO@WEBSTUDIO.COM.CN
电话: 010-59070059 / 010-86390986-802  手机: 13693660520 传真: 010-59070059-801
京公网安备:110108006741      京ICP备08002333号-4
王先生