镂空遮罩

什么是镂空遮罩？这个名词是我瞎盖的(-_-;) 其实就是用一个镂空图形做遮罩，麦圈就是一个典型的镂空图形。

这里有篇谈论镂空遮罩的文章注意点和一些措施（不过都不太实用-_-!）

不过最开心的还是在评论里面淘到了一个宝(sel2draw.jsfl)，把选择的图形转成程序绘制的jsfl~~，还发现该作者的blog又是哪个高人偶没给认识＿|￣|○

他提出了镂空遮罩失败的原因可能是由于FP绘制图形时，重叠部分采取的clockwise vs counterclockwise。这玩意儿是可操控的。可见flash供我们玩的东西越来越under了\(^ 0^)/。

以下代码，用Flash9发布效果全无（奇怪的是第一个方法也无效），需要F10。注意里面的注释。

Code
  1 package  
  2 {
  3     import flash.display.Graphics;
  4     import flash.display.Shape;
  5     import flash.display.Sprite;
  6     import flash.text.TextField;
  7     import flash.text.TextFieldAutoSize;
  8 
  9     public class DonutMask extends Sprite
 10     {
 11         
 12         public function DonutMask() 
 13         {
 14             //createMask();
 15             //createContent()
 16             createContent().mask = createMask();
 17             
 18         }
 19         
 20         private function createMask():Shape
 21         {
 22             var s:Shape = new Shape();
 23             s.graphics.beginFill(0);
 24             
 25             //drawDonut1(s.graphics);
 26             //drawDonut2(s.graphics);
 27             drawDonut3(s.graphics);
 28             
 29             s.graphics.endFill();
 30             
 31             addChild(s);
 32             
 33             return s;
 34         }
 35         
 36         private function createContent():Sprite
 37         {
 38             var str:String = '';
 39             for (var i:int = 0; i < 1000; ++i)
 40             {
 41                 str += String.fromCharCode( int(Math.random() * 26) + 65 );
 42             }
 43                 
 44             var t:TextField = new TextField();
 45             t.autoSize = TextFieldAutoSize.LEFT;
 46             t.multiline = true;
 47             t.wordWrap = true;
 48             t.width = 300;
 49             t.text = str;
 50             
 51             var s:Sprite = new Sprite();
 52             s.addChild(t);
 53             addChild(s);
 54             
 55             return s;
 56         }
 57         
 58         // 分步绘制，于顺/逆时针无关
 59         private function drawDonut1(g:Graphics):void
 60         {
 61             //*/
 62             // 顺时针绘制
 63             g.moveTo(0, 0);
 64             g.lineTo(100, 0);
 65             g.lineTo(100, 25);
 66             g.curveTo(0,100, 100, 175);
 67             g.lineTo(100, 200);
 68             g.lineTo(0, 200);
 69             g.lineTo(0, 0);
 70             /*/
 71             // 逆时针绘制
 72             g.moveTo(100, 0);
 73             g.lineTo(0, 0);
 74             g.lineTo(0, 200);
 75             g.lineTo(100, 200);
 76             g.lineTo(100, 175);
 77             g.curveTo(0,100, 100, 25);
 78             g.lineTo(100, 0);
 79             //*/
 80             
 81             /*/
 82             // 顺时针绘制另一部分
 83             g.moveTo(100, 0);
 84             g.lineTo(200, 0);
 85             g.lineTo(200, 200);
 86             g.lineTo(100, 200);
 87             g.lineTo(100, 175);
 88             g.curveTo(200,100, 100, 25);
 89             g.lineTo(100, 0);
 90             /*/
 91             // 逆时针绘制另一部分
 92             g.moveTo(100, 0);
 93             g.lineTo(100, 25);
 94             g.curveTo(200,100, 100, 175);
 95             g.lineTo(100, 200);
 96             g.lineTo(200, 200);
 97             g.lineTo(200, 0);
 98             g.lineTo(100, 0);
 99             //*/
100         }
101         
102         // 采用系统提供绘制矩形API，再重叠绘制
103         // 于顺/逆时针有关，从而得出系统API是顺时针绘制图形的
104         private function drawDonut2(g:Graphics):void
105         {
106             // 顺时针绘制矩形
107             g.drawRect(0, 0, 200, 200);
108             
109             /*/
110             // 顺时针绘制 - 镂空遮罩 有效
111             g.moveTo(100, 25);
112             g.curveTo(0, 100, 100, 175);
113             g.curveTo(200, 100, 100, 25);
114             /*/
115             // 逆时针绘制 - 镂空遮罩 无效
116             g.moveTo(100, 25);
117             g.curveTo(200, 100, 100, 175);
118             g.curveTo(0, 100, 100, 25);
119             //*/
120         }
121         
122         // 不采用系统提供绘制矩形API
123         // 保存绘制方向相同即可
124         private function drawDonut3(g:Graphics):void
125         {
126             /*/
127             // 顺时针绘制矩形
128             g.moveTo(0, 0);
129             g.lineTo(200, 0);
130             g.lineTo(200, 200);
131             g.lineTo(0, 200);
132             g.lineTo(0, 0);
133             /*/
134             // 逆时针绘制矩形
135             g.moveTo(0, 0);
136             g.lineTo(200, 0);
137             g.lineTo(200, 200);
138             g.lineTo(0, 200);
139             g.lineTo(0, 0);
140             //*/
141             
142             /*/
143             // 顺时针绘制
144             g.moveTo(100, 25);
145             g.curveTo(0, 100, 100, 175);
146             g.curveTo(200, 100, 100, 25);
147             /*/
148             // 逆时针绘制
149             g.moveTo(100, 25);
150             g.curveTo(200, 100, 100, 175);
151             g.curveTo(0, 100, 100, 25);
152             //*/
153             
154         }
155         
156         
157     }
158