[转] 缠绕规则在drawpath中的应用

使用as3的绘图API绘制填充区域时，经常会涉及到相交区域的颜色填充问题。Flash Player 10 和 Adobe AIR 1.5 还引入了路径“缠绕”（即路径的方向）这一概念。路径的缠绕可以是正向的（顺时针），也可以是负向的（逆时针）。渲染器为 data 参数解释矢量所提供坐标的顺序确定了缠绕的方向。
as3中的缠绕规则分为两种：奇偶规则和非零规则，奇偶规则是标准的缠绕规则，早期的绘图 API 都使用此规则。奇偶规则也是 Graphics.drawPath() 方法的默认规则。使用奇偶缠绕规则时，任何相交路径都交替使用开放填充与闭合填充。如果使用同一填充绘制的两个正方形相交，则不会填充相交的区域。通常，相邻区域不会都填充或都不填充。另一方面，非零规则依靠缠绕（绘制方向）来确定是否填充相交路径定义的区域。当相对缠绕的路径相交时，不填充所定义的区域，这与奇偶规则十分类似。对于相同缠绕的路径，将填充本来不填充的区域。
drawpaht方法的第三个可选参数参数winding，用于指定相交路径的缠绕或填充规则。这个参数的可选项分为GraphicsPathWinding.EVEN_ODD 或GraphicsPathWinding.NON_ZERO。
EVEN_ODD 是默认行为，它指在同样的填充下，图形的重叠区域不会被填充。
NON_ZERO,则提供了更多的缠绕规则的选择，在此行为下，通过使用非零缠绕规则可以灵活控制相交区域的填充和不填充。

下面的代码演示了在NON_ZERO行为下使用非零缠绕来实现的效果：
填充相交区域：
  var commands:Vector.<int>=new Vector.<int>();
   var lineto:int=GraphicsPathCommand.LINE_TO;
   var moveto:int=GraphicsPathCommand.MOVE_TO;
   commands.push(moveto,lineto,lineto,lineto,lineto);
   commands.push(moveto,lineto,lineto,lineto,lineto);
  
   var datas:Vector.<Number>=new Vector.<Number>();
   datas.push(0,0,100,0,100,20,0,20,0,0);
   datas.push(50,-50,70,-50,70,50,50,50,50,-50);
  
   var sp:Shape=new Shape();
   sp.graphics.beginFill(0xff00ff);
   sp.graphics.drawPath(commands,datas,GraphicsPathWinding.NON_ZERO);
   sp.graphics.endFill();
  
   sp.x=100;
   sp.y=100;
   addChild(sp);
通过修改其中一个图形的画线顺序，不填充相交区域：
   var commands:Vector.<int>=new Vector.<int>();
   var lineto:int=GraphicsPathCommand.LINE_TO;
   var moveto:int=GraphicsPathCommand.MOVE_TO;
   commands.push(moveto,lineto,lineto,lineto,lineto);
   commands.push(moveto,lineto,lineto,lineto,lineto);
  
   var datas:Vector.<Number>=new Vector.<Number>();
   datas.push(0,0,0,20,100,20,100,0,0,0);
   datas.push(50,-50,70,-50,70,50,50,50,50,-50);
  
   var sp:Shape=new Shape();
   sp.graphics.beginFill(0xff00ff);
   sp.graphics.drawPath(commands,datas,GraphicsPathWinding.NON_ZERO);
   sp.graphics.endFill();
  
   sp.x=100;
   sp.y=100;
   addChild(sp);
红色部分的改变轻松的实现了相交区域的不填充。
drawPath路径绘图方法在实现简单的绘图时，增加了代码的行数。但是，当我们在绘制复杂的图形时，它就给我们来了意想不到的魅力，特别是在做3d透视的过程中。对3d基础引擎开发的有兴趣的朋友，可以好好了解一下drawpath的使用。
在AdvancED_ActionScript 3.0一书中，对drawpath使用有详细的阐述和实例讲解。

文章来源：http://www.flashandflex.com/html/ASDVA/Drawing/1203.html

评论

1 楼 baixiaozhe 2012-03-20  

好文 正需要