`
hgfghww6
  • 浏览: 40327 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

Flash Drawing Api样条曲线

阅读更多

[1b]绘画方法:[/1b]
下面是Flash中的绘画方法:
[1b]
·    MovieClip.beginFill() //添充实色
·    MovieClip.beginGradientFill() //开始渐变添充
·    MovieClip.clear() //清除
·    MovieClip.curveTo() //绘制曲线
·    MovieClip.endFill() //结束添充
·    MovieClip.lineStyle() //线条样式
·    MovieClip.lineTo() //绘制直线
·    MovieClip.moveTo() //移动坐标
[/1b]
曲线的绘制使用的上述命令列表中的curveTo()用法。在绘制曲线的过程仍要结合上述命令列表中的一些方法,如moveTo,lineStyle,clear等等。
我们先来看曲线的语法:
curveTo(controlX:Number, controlY:Number, anchorX:Number, anchorY:Number)
      从上面的语法中我们分析,一条曲线有两个端点,还有用来控制曲度的点,我们称它的锚点。因为每个影片剪辑中的虚拟钢笔的默认起始位置为0,0点,所以根据公式:
anchorX,anchorY则为曲线的第二个端点,我们把它称为锚点,当然你可以在绘制曲线之前使用moveTo来移动起始点。
ControlX,controlY为控制曲线的曲度的控制点,通过它可以帮助我们来控制曲线,曲线的背后有着很复杂的数学背景,不同的曲线控制点的数量也会不同,二次曲线,三次曲线等等可控的控制点数量是不同的。
[1b]基本曲线curve[/1b]
我们先来看一个最简单的范例绘制曲线:
先看演示:
basic_draw_curve.swf
代码如下:
[1b]代码:[/1b] 
drawbtn.onRelease= function(){
    _root.lineStyle(1,0xff0000,100);
    _root.curveTo(200,350,200,150);
    
}
 
我们使用的是上一篇教程中的basic_draw的代码,只是把按钮中的lineTo更换为curveTo方法。
在上述代码中
_root.curveTo(200,350,200,150);
其中前两个数字代表控制曲度的控制点的坐标,后两个数字是曲线的第二端点,也称为锚点。
点击按钮就可绘制了。这只是针对我们曲线的最简单的应用。
[1b]控制曲线:[/1b]
先看演示
control_draw_curve.swf
代码如下:
[1b]代码:[/1b] 
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);
createEmptyMovieClip("myClip1",2);
function drawline(){
    myClip.clear();
    myClip.moveTo(sign1._x,sign1._y);
    
    myClip.lineStyle(2, Math.random()*0xff0000+0xffff00, 100);
    myClip.curveTo(sign2._x,sign2._y,sign3._x,sign3._y);
    //绘制辅助线
    myClip1.clear();
    myClip1.lineStyle(1,0xcccccc,100);
    myClip1.moveTo(sign1._x,sign1._y);
    myClip1.lineTo(sign2._x,sign2._y);
    myClip1.lineTo(sign3._x,sign3._y);
    myClip1.lineTo(sign1._x,sign1._y);
}
drawline();
sign1.onPress =sign2.onPress=sign3.onPress= function(){
    this.startDrag();
    onEnterFrame = drawline;
}
sign1.onRelease =sign2.onRelease=sign3.onRelease= function(){
    this.stopDrag();
}  
本文转自:http://www.5uflash.com/flashjiaocheng/Flashyingyongkaifa/395.html
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics