用FLASH AS3画光滑曲线

最新推荐文章于 2012-11-19 22:37:12 发布

ldreams

最新推荐文章于 2012-11-19 22:37:12 发布

阅读量2.4k

点赞数

分类专栏： flash as 文章标签： flash actionscript function timer 图形文档

flash as 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用Flash ActionScript 3通过lineTo()和curveTo()方法动态绘制直线与曲线，并实现鼠标拖动绘制平滑曲线的技术细节。

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

一、动态画线基础知识
　　要用flash ActionScript动态画线，我们先来讲一些基础知识。在flash ActionScript3中提供一个flash.display.Graphics类，用它可以创建矢量图形（直线、曲线、形状、填充和渐变），并使用ActionScript在屏幕上显示它们。您可以在任何Shape、Sprite或MovieClip实例中使用ActionScript进行绘制（使用其中的每个类中定义的graphics属性）。
　　要使用Shape、Sprite或MovieClip实例的graphics属性进行绘制，您必须先定义在绘制时使用的样式（线条大小和颜色、填充颜色）。就像使用AdobeFlashCS3Professional或其它绘图应用程序中的绘制工具一样。使用ActionScript进行绘制时，要创建纯色线条，请使用lineStyle()方法。调用此方法时，您指定的最常用的值是前三个参数：线条粗细、颜色以及Alpha。
　　例如，该行代码指示名为myShape的Shape对象绘制2个像素粗、红色(0x990000)以及75%不透明的线条：
myShape.graphics.lineStyle(2,0x990000,.75);
　　Alpha参数的默认值为1.0(100%)，因此，如果需要完全不透明的线条，可以将该参数的值保持不变。
　　指定了线条样式和填充属性后，下一步是指示绘制的起始点。Graphics实例具有一个绘制点，就像在一张纸上的钢笔尖一样。无论绘制点位于什么位置，它都是开始执行下一个绘制动作的位置。最初，Graphics对象将它绘制时所在对象的坐标空间中的点(0,0)作为起始绘制点。要在其它点开始进行绘制，您可以先调用moveTo()方法，然后再调用绘制方法之一。这类似于将钢笔尖从纸上抬起，然后将其移到新位置。确定绘制点后，可通过使用对绘制方法lineTo()（用于绘制直线）和curveTo()（用于绘制曲线）的一系列调用来进行绘制。
　　调用lineTo()方法时，Graphics对象将绘制一条直线，该直线从当前绘制点到指定为方法调用中的两个参数的坐标，以便使用指定的线条样式进行绘制。
　　例如，该行代码将绘制点放在点(100,100)上，然后绘制一条到点(200,200)的直线：
myShape.graphics.moveTo(100,100);
myShape.graphics.lineTo(200,200);
　　调用curveTo()方法可以绘制二次贝塞尔曲线。这将绘制一个连接两个点（称为锚点）的弧，同时向第三个点（称为控制点）弯曲。Graphics对象使用当前绘制位置作为第一个锚点。调用curveTo()方法时，将传递以下四个参数：控制点的x和y坐标，后跟第二个锚点的x和y坐标。
　　例如，以下代码绘制一条曲线，它从点(100,100)开始，到点(200,200)结束。由于控制点位于点(185,125)，因此，这会创建一条曲线，它先向右移动，然后向下移动：
myShape.graphics.moveTo(100,100);
myShape.graphics.curveTo(185,125,200,200);
二、动态绘制光滑曲线
　　要画出光滑曲线，原理是先建立一个Timer类和两个一维数组。当按下鼠标左键开始计时，同时使用lineTo()方法绘制线条line，鼠标移动经过的（x,y）坐标分别记入这两个数组；当释放鼠标左键时，计时器停止，同时停止画线。有了这两个数组记录的各个坐标点的位置，删除第一条线line的同时在利用curveTo()进行重新绘制第二条光滑曲线line1。其中控制点的x和y坐标是前一个锚点坐标，第二个锚点的x和y坐标是前一个锚点和后一个锚点的中点坐标。为了使绘出的曲线更加光滑，变量step为取点的间隔。
先看一下效果：http://www.fhs.cn/swf/drawing.swf

核心代码如下：
stage.addEventListener(MouseEvent.MOUSE_DOWN,onMsDown);
stage.addEventListener(MouseEvent.MOUSE_UP,onMsUp);
var points_x:Array = new Array();
var points_y:Array = new Array();
var line:MovieClip;
var line1:MovieClip;
var drawing:Boolean =false;
var myTimer:Timer=new Timer(10,0);
var step=8;

function reDraw() {
var i;
line1 =new MovieClip ;
line1.graphics.lineStyle(3, 0xFF00FF, 50);
line1.graphics.moveTo(Number(points_x[0]), Number(points_y[0]));
addChild(line1);
for (i = step; i < points_x.length -step; i=i+step) {
  var xc:Number = (points_x[i] + points_x[i+step]) / 2;
  var yc:Number = (points_y[i] + points_y[i+step]) / 2;
  line1.graphics.curveTo(points_x[i],points_y[i], xc, yc);
}
line1.graphics.lineTo(points_x[points_x.length -1],points_y[points_x.length -1] );

}

function onMsUp(event:MouseEvent):void {
reDraw ();
points_x.splice(0);
points_y.splice(0);
drawing=false;
myTimer.stop();
removeChild(line);
}