Flash Drawing Api样条曲线

最新推荐文章于 2021-11-29 20:28:51 发布

iteye_13787

最新推荐文章于 2021-11-29 20:28:51 发布

阅读量92

点赞数

分类专栏： flash技术文章标签： Flash

flash技术专栏收录该内容

55 篇文章

订阅专栏

本文介绍在Flash中如何使用curveTo()方法绘制曲线。通过具体示例讲解了如何设定控制点和锚点，以及如何调整曲线形状。同时提供了简单示例和控制曲线的完整代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

[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