酷符网Flex > 正文

flex使用鼠标画图的简单例子

2010-07-01 16:20codeif.com
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="init()">
<mx:Script>
	<![CDATA[
		import mx.binding.utils.BindingUtils;
		import mx.controls.Alert;
		import mx.events.MoveEvent;
		private var mX:Number;
		private var mY:Number;
		private var isDown:Boolean = false;
		[Bindable] public var _lineSize:int = 3;
		[Bindable] public var _lineColor:uint = 0xff0000;	

		private function init():void{
			myPanel.addEventListener(MouseEvent.MOUSE_DOWN, downHandler);
			myPanel.addEventListener(MouseEvent.MOUSE_MOVE, moveHandler);
			myPanel.addEventListener(MouseEvent.MOUSE_UP, upHandler);
			BindingUtils.bindProperty(this, "_lineSize", hs, "value");
			BindingUtils.bindProperty(this, "_lineColor", cp, "selectedColor");
		}	

		private function downHandler(e:MouseEvent):void{
			isDown = true;
			mX = myPanel.mouseX;
			mY = myPanel.mouseY;
		}

		private function upHandler(e:MouseEvent):void{
			isDown = false;
		}

		private function moveHandler(e:MouseEvent):void{
			if(isDown){
				var x:Number = myPanel.mouseX;
				var y:Number = myPanel.mouseY;
				myPanel.graphics.lineStyle(_lineSize, _lineColor, 1);
				myPanel.graphics.moveTo(x, y);
				myPanel.graphics.lineTo(mX, mY);
				mX = x;
				mY = y;
			}
		}
	]]>
</mx:Script>
	<mx:Panel width="100%" height="100%">
		<mx:Canvas id="myPanel" x="115" y="80" width="100%" height="90%" buttonMode="true" borderStyle="outset">
		</mx:Canvas>
		<mx:Button label="清空" click="myPanel.graphics.clear();"/>
		<mx:HSlider id="hs" value="{_lineSize}"/>
		<mx:ColorPicker id="cp" selectedColor="{_lineColor}"/>
	</mx:Panel>
</mx:Application>

对程序进行一下简单说明:
[Bindable]元数据标签用于通知编译器,本属性会被应用程序中另外的某处所监视。并使用BindingUtils类的bindProperty对属性进行了动态绑定。

相关文章

新浪微博 | 淘段子 | 我的博客 | 淘宝店铺 | jnan.org | RSS
Copyright © 2009 - 2011 酷符网