每天学一点flash（73）恋上我的CD

亦凉 2022-04-01 15:30 146阅读 0赞

![0_1291821938Ux1z.gif][]

![0_1291879681lGVQ.gif][]

这几天看了同学一张自制光盘，觉得很有意思，于是尝试通过as3编程来制作这个类，其实就是使用了绘图API类通过填充位图的方式来实现这种cd的效果。

我们需要准备的材料是几张图片。这些图片通过外部加载的方式来实现获取位图的数据，然后通过一个函数beginBitmapFill 使用位图来进行填充这个圆形。而中间的周边的圆则是通过drawCircle 来进行绘制，绘制过程当中，使用一些接近灰色的颜色来实现搭配，这样看起来有的胶泽的味道在里面。

制作流程：

1. 外部加载图片.

2.使用位图对图片进行填充beginBitmapFill

3.在填充完成之后，drawCircle 几个圆用于cd中间的圆圈

4。可以尝试封装加载的方式对图像进行管理。

整个流程使用的 并没有什么的算法，而仅仅是使用我们平时的绘图api进行创作。当你慢慢发现到绘图api 魅力的时候，你就可以像画家一样操控画笔进行描绘你的图案。这样又多了一样好玩的东西了。

[![3408_1264926325bRe3.png][]][3408_1264926325bRe3.png 1]

测试：

package \{ import flash.display.\*; import flash.net.\*; import flash.events.\*; import flash.filters.\*; import flash.geom.\*; public class Example extends Sprite \{ private var manager:CDManager=new CDManager();//cd管理类 public function Example() \{ init(); \} private function init():void \{ manager.addEventListener(CDManager.LOAD\_ALL\_COMPLETE,onLoadAllComplete); manager.addImage("cd1",this,100,"1.jpg",true);//添加图片列表 manager.addImage("cd2",this,100,"2.jpg",true); manager.addImage("cd3",this,100,"3.jpg",true); manager.addImage("cd4",this,100,"4.jpg",true); manager.addImage("cd5",this,100,"5.jpg",true); manager.addImage("cd6",this,100,"6.jpg",true); manager.start();//开始加载外部图片 \} private function onLoadAllComplete(event:Event):void \{ manager.getImage("cd1").drawCD(manager.getImage("cd1").content,10,15,30,new Point(-280,-180));//绘制cd图案 manager.move("cd1",stage.stageWidth/2-100,stage.stageHeight/2+150);//设置位置 manager.getImage("cd1").filters=\[new DropShadowFilter(3,45,0.5,1,1)\]; manager.getImage("cd2").drawCD(manager.getImage("cd2").content,10,15,30,new Point(-170,-230)); manager.move("cd2",stage.stageWidth/2-200,stage.stageHeight/2); manager.getImage("cd2").filters=\[new DropShadowFilter(3,45,0.5,1,1)\]; manager.getImage("cd3").drawCD(manager.getImage("cd3").content,10,15,30,new Point(-280,-100)); manager.move("cd3",stage.stageWidth/2,stage.stageHeight/2); manager.getImage("cd3").filters=\[new DropShadowFilter(3,45,0.5,1,1)\]; manager.getImage("cd4").drawCD(manager.getImage("cd4").content,10,15,30,new Point(-180,-100)); manager.move("cd4",stage.stageWidth/2+200,stage.stageHeight/2); manager.getImage("cd4").filters=\[new DropShadowFilter(3,45,0.5,1,1)\]; manager.getImage("cd5").drawCD(manager.getImage("cd5").content,10,15,30,new Point(-180,-100)); manager.move("cd5",stage.stageWidth/2+200,stage.stageHeight/2-200); manager.getImage("cd5").filters=\[new DropShadowFilter(3,45,0.5,1,1)\]; manager.getImage("cd6").drawCD(manager.getImage("cd6").content,10,15,30,new Point(-400,-100)); manager.move("cd6",stage.stageWidth/2,stage.stageHeight/2-200); manager.getImage("cd6").filters=\[new DropShadowFilter(3,45,0.5,1,1)\]; \} \} \}

package \{ import flash.utils.Dictionary; import flash.events.\*; import flash.display.DisplayObjectContainer; public class CDManager extends EventDispatcher \{ private var data:Dictionary=new Dictionary(true); private var length:int=0; public static const LOAD\_ALL\_COMPLETE:String="loadallcomplete";//加载 public function CDManager() \{ \} //添加图片 public function addImage(id:String,parent:DisplayObjectContainer,radius:Number,url:String,istartDrag:Boolean=false):void \{ var obj:Object=\{\}; obj.id=id; obj.url=url; obj.item=new LoveCD(radius); obj.istartDrag=istartDrag; parent.addChild(obj.item); data\[id\]=obj; length++; \} //开始加载 public function start():void \{ for each (var obj:\* in data) \{ obj.item.loadImage(obj.url); obj.item.addEventListener(LoveCD.LOAD\_COMPLETE,onLoadComplete); if(obj.istartDrag) \{ obj.item.addEventListener(MouseEvent.MOUSE\_DOWN,onStartDragHandler); obj.item.addEventListener(MouseEvent.MOUSE\_UP,onStopDragHandler); \} \} \} private function onLoadComplete(event:Event):void \{ event.currentTarget.removeEventListener(LoveCD.LOAD\_COMPLETE,onLoadComplete); length--; if(length==0) \{ this.dispatchEvent(new Event(CDManager.LOAD\_ALL\_COMPLETE)); \} \} //拖动 private function onStartDragHandler(event:MouseEvent):void \{ event.currentTarget.buttonMode=true; event.currentTarget.startDrag(false); \} //停止拖动 private function onStopDragHandler(event:MouseEvent):void \{ event.currentTarget.buttonMode=false; event.currentTarget.stopDrag(); \} //获取图片 public function getImage(id:String):LoveCD \{ return data\[id\].item; \} public function move(id:String,x:Number,y:Number):void \{ data\[id\].item.x=x; data\[id\].item.y=y; \} \} \}

LoveCD.as

package \{ import flash.display.\*; import flash.net.\*; import flash.events.\*; import flash.filters.\*; import flash.geom.\*; public class LoveCD extends Sprite \{ private var radius:Number; private var \_bitmap:Bitmap; public static const LOAD\_COMPLETE:String="complete"; public var url:String; public function LoveCD(radius:Number) \{ this.radius=radius; \} //加载图片 public function loadImage(url:String):void \{ this.url=url; var loader:Loader=new Loader(); loader.contentLoaderInfo.addEventListener(Event.COMPLETE,onLoadComplete); loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO\_ERROR,onErrorHandler); loader.load(new URLRequest(url)); \} //绘制底部 public function drawBase():void \{ var bottomShape:Shape=new Shape(); addChild(bottomShape); //trace(radius); bottomShape.graphics.beginFill(0xffffff,0.5); bottomShape.graphics.drawCircle(0,0,this.radius); bottomShape.graphics.drawCircle(0,0,this.radius-2); bottomShape.graphics.endFill(); \} private function onErrorHandler(event:Event):void \{ throw new Error("发送错误"); \} private function onLoadComplete(event:Event):void \{ event.currentTarget.removeEventListener(Event.COMPLETE,onLoadComplete); event.currentTarget.removeEventListener(IOErrorEvent.IO\_ERROR,onErrorHandler); var bitmap:Bitmap=Bitmap(event.currentTarget.content); this.content=bitmap; this.dispatchEvent(new Event(LoveCD.LOAD\_COMPLETE)); \} //设置位图 public function set content(value:Bitmap):void \{ this.\_bitmap=value; \} public function get content():Bitmap \{ return this.\_bitmap; \} public function move(x:Number,y:Number):void \{ this.x=x; this.y=y; \} //绘制CD,radiusA,radiusB,radiusC，由小到大 public function drawCD(image:Bitmap,radiusA:Number,radiusB:Number,radiusC:Number,offPoint:Point=null,repeat:Boolean=false,smooth:Boolean=false):void \{ drawBase(); var maskShape:Shape=new Shape(); maskShape.x=0; maskShape.y=0; addChild(maskShape); if (offPoint==null) \{ maskShape.graphics.beginBitmapFill(image.bitmapData,null,repeat,smooth); \} else \{ maskShape.graphics.beginBitmapFill(image.bitmapData,new Matrix(1,0,0,1,offPoint.x,offPoint.y),repeat,smooth); \} maskShape.graphics.drawCircle(0,0,radiusA); maskShape.graphics.drawCircle(0,0,radius-2); maskShape.graphics.endFill(); var shapeB:Shape=new Shape(); shapeB.x=0; shapeB.y=0; addChild(shapeB); shapeB.graphics.beginFill(0x999999,0.3); shapeB.graphics.lineStyle(0,0x999999); shapeB.graphics.drawCircle(0,0,radiusB); shapeB.graphics.drawCircle(0,0,radiusB+2); shapeB.graphics.drawCircle(0,0,radiusC); shapeB.graphics.endFill(); shapeB.graphics.lineStyle(0,0xffffff,0.6); shapeB.graphics.drawCircle(0,0,radiusC-1); \} \} \}

[0_1291821938Ux1z.gif]: /images/20220401/b4481cf761df463da05e017899f295b5.png
[0_1291879681lGVQ.gif]: /images/20220401/80f042e40c884a0ea4a9bcab9b4a3c7d.png
[3408_1264926325bRe3.png]: /images/20220401/f26cb5cfcb9841038b568635e4d5ae1b.png
[3408_1264926325bRe3.png 1]: http://cid-49843563c84536ce.skydrive.live.com/browse.aspx/.Public?uc=1&isFromRichUpload=1