×
文章路径: Flex > C-DRAWS

C-DRAWS画图程序(二):主体界面

发表于3年前(Dec 12, 2014 9:38:27 PM)  阅读 663  评论 0

分类: Flex C-DRAWS

标签: c-draws

  这节主要是完成主体界面的制作,界面的效果如下图:

  顶部的是菜单栏,左边的是画图工具栏,右边的是画布,参考的是windows画图的布局。不是视频,我就粗略的说下编程的重点以及难点 ,本人自己也是个菜鸟,有些地方、术语我也不太懂,知其然而不知其所以然,有错误的地方请大家指出来。我会把源码附在最后。

1、首先我说下我的开发环境:xp系统,eclipse ,sdk3.4,Air2.5。

2、我们先建立一个Air工程,工程建好后,src下有main.mxml,main-app.xml(我的主窗口用的默认名称main)两个文件。main.mxml是我们的主应用程序框口,是我们呈现的入口,main-app.xml是程序的一些配置。大家打开main-app.xml可以看到里面大部分内容都已经被注释了,因为大部分属性都已经给了默认值。现在我们先改一个值–窗口标签。找到initialWindow节点下面的title节点,取消注释,填上您需要的标题,标题就设置好了,我们运行来查看一下。如何运行:选中main.mxml,右键选择Debug As–>Adobe AIR Application。

3、现在我们在工程里建3个文件夹,就是java里的包:

  com.cangzhitao.draw:用来放画图有关的类,如画图工具箱,画布等。

  com.cangzhitao.image:用来放该程序相关的图片

  com.cangzhitao.util:用来放一些公共的工具类

4、先我们来创建一个画布,画布肯定是用Canvas组件,但是Flex系统的Canvas肯定不够用的,所以我们新建一个DrawCanvas类 来继承系统的Canvas。DrawCanvas里暂时不作处理。

5、然后我们来建画图工具箱,工具箱的话我的设计是就是在一个Canvas上画上一些图片按钮,比较简单,所以我们直接新建一个类型为Canvas的Component控件,以后陆续在里面加按钮。

6、我们来看下现在的目录结构:

7、现在我们在main.mxml里面进行布局,源码查看文章结尾,注释我尽可能的多写点,对关键点我会单独进行说明:

a、增加命名空间draw,见代码第三行:xmlns:draw=”com.cangzhitao.draw.*” ,这样我们可以直接在101跟104行使用draw:UtilBox以及draw:DrawCanvas标签;

b、在主窗口applicationComplete事件上调用maxWin()方法,让程序一打开就最大化;

c、5-14行,为整个应用程序的字体配上一个样式,如果使用默认的,文字将会很丑;

d、菜单栏的创建跟调用直接看源码就行了,很容易懂的,不部分应用程序都这样,以后可以直接copy;

e、104行DrawCanvas外面套了个NVBox,NVBox是我自己新建的一个Component控件,继承于系统的VBox,里面就一个方法,重写了父类的measure方法,并且是空实现。为什么要这样呢?如果DrawCanvas没有套着个NVBox,当DrawCanvas的大小超过一定程度,屏幕容不下时,整个application会出现一个滚动条,着个滚动条会把UtilBox也包括进去,这肯定不是我们所希望的。这种情况产生的原因就是DrawCanvas大小改变时,他会通知他的父容器,如果父容器不够大了,父容器就会自动扩大,所以如果想滚动条出现在子容器中就必须重写measure方法:
override protected function measure():void{}

  这样主窗口程序就算完成了,下一节我们开始准备画图了,从矩形开始,其实只要矩形画出来了,别的也都是一样的。

附:main.xml源码




 	
	/**
	整体字体样式
	*/
	Application {
		font-size:12px;
		font-style: normal;
		font-weight: normal;
	}
	/**
		控件提示信息字体样式
	*/
	ToolTip {
		font-size:12px;
		font-style: normal;
		font-weight: normal;
	}
	
	
		
                    
                    	
                    	
                    	
                    	
                    	
                    
                    
                    	
                    	
                    	
                    
                    
                    
                    
                    	
                    
                ;
            //菜单绑定
            [Bindable] 
            public var menuBarCollection:XMLListCollection = new XMLListCollection(toolBarXML);
            
            //菜单单击事件
			private function menuBarClickHandler(event:Event):void {
				if(event.target is MenuBarItem) {
					if(MenuBarItem(event.target).enabled == true) {
						var data:String = MenuBarItem(event.target).data.@data; 
			            this.menuClickHandler(data);
					}
				}
			}
			
			//处理菜单单击事件
			private function menuClickHandler(data:String):void {
				switch(data) {
					case "game":
						break;
					default :
						break;
				}
			}
			
			//处理菜单子项单击事件
			private function menuItemClickHandler(event:MenuEvent):void {
				switch(String(event.item.@data)){
					//清空当前画布,打开新画布,有未保存的提示保存,
					case "new":
						if(graph.isChange) {
							Alert.yesLabel="是"; 
							Alert.noLabel="否";
							Alert.cancelLabel="取消";
                			Alert.show("您还没有保存",this.title,Alert.YES|Alert.NO|Alert.CANCEL,this,newcloseHandler);
						} else {
							newDraw();
						}
						break;
					//保存
					case "save":
						saveDraw();
						break;
					//另存为
					case "save_as":
						saveDraw(1);
						break;
					case "open":
						if(graph.isChange) {
							Alert.yesLabel="是"; 
							Alert.noLabel="否";
							Alert.cancelLabel="取消";
                			Alert.show("您还没有保存",this.title,Alert.YES|Alert.NO|Alert.CANCEL,this,opencloseHandler);
						} else {
							openFileWindow();
						}
						break;
					//退出程序
					case "exit":
						if(graph.isChange) {
							Alert.yesLabel="是"; 
							Alert.noLabel="否";
							Alert.cancelLabel="取消";
                			Alert.show("您还没有保存",this.title,Alert.YES|Alert.NO|Alert.CANCEL,this,exitcloseHandler);
						} else {
							this.exit();
						}
						break;
					//粘贴
					case "paste":
						this.paste();
						break;
					//粘贴
					case "cut":
						this.cut();
						break;
					case "copy":
						this.copy();
						break;
					default :
						break;
				}
			}
			
			//剪切(当背景透明时会有问题)
			private function cut():void {
				this.copy();
				var sketch:Sketch;
				if(graph.getChildByName(DrawCanvas.CUT_RECTANGLE)==null) {
					return;
				}
				sketch = graph.getChildByName(DrawCanvas.CUT_RECTANGLE) as Sketch;
				sketch.style.alpha=0;
				sketch.style.fillAlpha=1;
				sketch.style.fillColor = graph.getStyle("backgroundColor") as uint;
				sketch.style.fillAlpha = graph.getStyle("backgroundAlpha") as Number;
				sketch.draw();
			}
			
			//复制
			private function copy():void {
				var sketch:Sketch;
				var bit:BitmapData;
				bit = ImageSnapshot.captureBitmapData(graph);
				if(graph.getChildByName(DrawCanvas.CUT_RECTANGLE)==null) {
					Clipboard.generalClipboard.setData(ClipboardFormats.BITMAP_FORMAT, bit, true);
					return;
				}
				sketch = graph.getChildByName(DrawCanvas.CUT_RECTANGLE) as Sketch;
				graph.hideSketch();
				var bit2:BitmapData = new BitmapData(sketch.width,sketch.height);
				bit2.copyPixels(bit, new Rectangle(sketch.x,sketch.y,sketch.width,sketch.height), new Point(-1,-1));
				graph.removeSketch();
				Clipboard.generalClipboard.setData(ClipboardFormats.BITMAP_FORMAT, bit2, true);
			}
			
			//粘贴
			private function paste():void {
				if(Clipboard.generalClipboard.formats[0] == ClipboardFormats.BITMAP_FORMAT) {
					var bitmapData:BitmapData = BitmapData(Clipboard.generalClipboard.getData(ClipboardFormats.BITMAP_FORMAT));
					var bitmap:Bitmap = new Bitmap(bitmapData);
					
					var image:Image = new Image();
					image.load(bitmap);
					var sketch:Sketch = ShapeFactory.getShape(ShapeType.IMAGE);
					sketch.width = bitmap.width;
					sketch.height = bitmap.height;
					sketch.bitMapData = bitmapData;
					sketch.style.alpha = 0;
					sketch.draw();
					graph.addChild(sketch);
					
				}
			}
			
			
			private function opencloseHandler(e:CloseEvent):void {
				//保存完再打开
				if(e.detail==Alert.YES) {
					saveDraw(3);
				//直接打开
				} else if(e.detail==Alert.NO) {
					openFileWindow();
				}
			}
			
			private function exitcloseHandler(e:CloseEvent):void {
				//保存完再退出
				if(e.detail==Alert.YES) {
					saveDraw(4);
				//直接退出
				} else if(e.detail==Alert.NO) {
					this.exit();
				}
			}
			
			private function openFileWindow():void {
				var file:File = File.documentsDirectory;
				
				file.browseForOpen("请选择要打开的文件", [imagesFilter]);
				file.addEventListener(Event.SELECT, openFileSelect);
			}
			
			private function openFileSelect(e:Event):void {
				newDraw();
				var newFile:File = new File(e.target.nativePath);
				currentFile = newFile;
				openFile(currentFile);
			}
			
			private function newcloseHandler(e:CloseEvent):void {
				//保存完再新建
				if(e.detail==Alert.YES) {
					saveDraw(2);
				//直接新建
				} else if(e.detail==Alert.NO) {
					newDraw();
				}
			}
			
			//新建一个画布
			private function newDraw():void {
				graph.clear();
				currentFile = null;
				graph.isChange = false;
				fileTitle = NONAME;
			}
			
			//type,触发类型,
			//直接点保存触发为0,
			//另存为1,
			//新建触发保存类型为2,保存完药新建,
			//保存完打开3
			//保存完退出4
			private function saveDraw(type:int=0):void {
				this.saveTriggerType = type;
				if(type==0) {
					//没保存过
					if(currentFile==null) {
						openSaveFileWindow();
					//已经保存过
					} else {
						saveFile(currentFile);
					}
				} else if(type==1) {
					openSaveFileWindow();
				} else if(type==2||type==3||type==4) {
					if(currentFile==null) {
						openSaveFileWindow();
					} else {
						saveFile(currentFile);
					}
				}/*  else if(type==3) {
					if(currentFile == null) {
						openSaveFileWindow();
					} else {
						saveFile(currentFile);
					}
				} */
			}
			
			private var imagesFilter:FileFilter = new FileFilter("Images", "*.jpg;*.gif;*.png");

			private function openSaveFileWindow():void {
				var file:File = File.documentsDirectory;
				file.browseForSave("请选择保存路径");
				file.addEventListener(Event.SELECT, saveDirectorySelect);
			}
			
			private function saveDirectorySelect(event:Event):void {
				var newFile:File = new File(event.target.nativePath);
				if(newFile.extension!="jpg"&&newFile.extension!="jpeg"&&newFile.extension!="png"&&newFile.extension!="cdraw") {
					newFile = newFile.parent.resolvePath(newFile.name+".png");
				}
				currentFile = newFile;
				saveFile(currentFile);
				if(this.saveTriggerType==2) {
					newDraw();
				} else if(this.saveTriggerType==3) {
					openFileWindow();
				} else if(this.saveTriggerType == 4) {
					this.exit();
				}
			}
			
			//把图保存到指定路径
			private function saveFile(file:File):void {
				cursorManager.setBusyCursor();
				
				graph.cancelSelected(null);
				
				var bit:BitmapData = ImageSnapshot.captureBitmapData(graph);
				var image:PNGEncoder  = new PNGEncoder();
				var bytes:ByteArray = image.encode(bit);
				
				var fileStream:FileStream = new FileStream();
				fileStream.open(file, FileMode.WRITE);
				fileStream.writeBytes(bytes);
				fileStream.close();
				graph.isChange = false;
				fileTitle = file.name;
				cursorManager.removeBusyCursor();
			}
			
			//打开图
			private function openFile(file:File):void {
				cursorManager.setBusyCursor();
				
				//读入到ByteArray
				var bytes:ByteArray = new ByteArray();
				var fileStream:FileStream = new FileStream();
				fileStream.open(file, FileMode.READ);
				fileStream.readBytes(bytes, 0, fileStream.bytesAvailable);
				fileStream.close();
				
				//加载到内存中
				var loader:Loader = new Loader();
				loader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded);
				loader.loadBytes(bytes);
				
				graph.isChange = false;
				cursorManager.removeBusyCursor();
			}
			
			private function imageLoaded(event:Event):void {
				event.target.removeEventListener(Event.COMPLETE, imageLoaded);
				var bitmap:Bitmap = Bitmap(event.target.loader.content);
				//建立image对象
				var image:Image = new Image();
				image.load(bitmap);
				graph.addChild(image);
				
				graph.width = bitmap.width;
				graph.height = bitmap.height;
			}
		]]>
	
	
	
		
		
	    
	    	
	    	
	    	
    		
    			
	    				
    			
    		
	    
	

工程源码/upload/2014/11/12/C-DRAW_source.rar

发表评论