杜鹏的小代码
中国 陕西 西安

导航

 

如题,ActionScript3.0本身没有提供绘制虚线的方法,如果是绘制直的虚线,我们可以使用循环的形式去绘制一条笔直的虚线。

但如果牵扯到绘制出的虚线不是直线而是有一定弧度的曲线呢?一般的做法是自己重写一个二次贝塞尔曲线的算法。但这样做太复杂。

ActionScript的Graphics类已经为我们提供了绘制曲线的方法:

public function curveTo(controlX:Number, controlY:Number, anchorX:Number, anchorY:Number):void

如果我们能够直接利用这个方法绘制出虚线就好了。只可惜AS没有给我们提供。所以要自己动手了。

一般的我们在绘制一条线或者一个图形之前,都是需要设置lineStyle的,这个方法就是设置线条粗细、颜色、透明度等参数的。

其实,AS还为我们提供了一个渐变色线条样式的设置方法:

public function lineGradientStyle(type:String, colors:Array, alphas:Array, ratios:Array, matrix:Matrix = null, spreadMethod:String = "pad", interpolationMethod:String = "rgb", focalPointRatio:Number = 0):void

我们可以使用这个方法达到虚线的目的。

原理就是使用纯色(也就是完全不透明的颜色)与纯透明色之间的渐变效果来实现。例如下面的代码:

1 <?xml version="1.0" encoding="utf-8"?>
2 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
3 <mx:Script>
4 <![CDATA[
5 private function init():void
6 {
7 /*can.graphics.moveTo(5,5);
8 can.graphics.lineStyle(1,0xff0000,1);
9 can.graphics.lineTo(100,100);
10
11 can.graphics.moveTo(5,5);
12 can.graphics.curveTo(100,5,100,100);
13 */
14
15 var colors:Array = new Array(0x000000, 0xFFFFFF, 0x000000, 0xFFFFFF, 0x000000, 0xFFFFFF, 0x000000);
16 var alphas:Array = new Array(100, 0, 100, 0, 100, 0, 100);
17 var ratios:Array = new Array(0, 255/7, 255*2/7, 255*3/7, 255*4/7, 255*5/7, 255*6/7);
18 can.graphics.lineStyle(2);
19 can.graphics.lineGradientStyle(GradientType.RADIAL,colors,alphas,ratios,null,SpreadMethod.REPEAT);
20 can.graphics.moveTo(5, 5);
21 can.graphics.curveTo(400, 5, 400, 400);
22 can.graphics.moveTo(5, 450);
23 can.graphics.lineTo(800, 450);
24 }
25 ]]>
26 </mx:Script>
27 <mx:Canvas x="0" y="0" width="1024" height="768" id="can">
28 </mx:Canvas>
29 </mx:Application>

 实现出来的效果如下

posted on 2011-01-06 23:25  杜鹏  阅读(2855)  评论(1编辑  收藏  举报