flex调色板功能实现

最新推荐文章于 2024-06-25 10:57:27 发布

原创最新推荐文章于 2024-06-25 10:57:27 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flex #function #socket #string #import #application

蛋疼的flex啊专栏收录该内容

5 篇文章

订阅专栏

需求描述：调色板（假设通过RGB调节），可以通过选择或者输入改变，也收到socket发送的RGB值后改变。另外，主界面有滑动条调节亮度。如果不用socket发送RBG，则可以直接参照列出的参考网址2即可。

成品及文件的说明如下：

CustomSocket.as完整代码：

package {
    import flash.errors.*;
    import flash.events.*;
    import flash.net.Socket;
	
    public class CustomSocket extends Socket 	{
		public var receivetext:String = "";
		
		public function CustomSocket(host:String = null, port:uint = 0) {
            super();
            configureListeners();
            if (host && port)  {
                super.connect(host, port);
            }
		}
        
        private function configureListeners():void {
            addEventListener(Event.CLOSE, closeHandler);
            addEventListener(Event.CONNECT, connectHandler);
            addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
            addEventListener(SecurityErrorEvent.SECURITY_ERROR, securityErrorHandler);
            addEventListener(ProgressEvent.SOCKET_DATA, socketDataHandler);
        }
        private function closeHandler(event:Event):void {
            trace("closeHandler: " + event);
        }
        
        private function connectHandler(event:Event):void {
            trace("connectHandler: " + event);
        }
        
        private function ioErrorHandler(event:IOErrorEvent):void {
            trace("ioErrorHandler: " + event);
        }
        
        private function securityErrorHandler(event:SecurityErrorEvent):void {
            trace("securityErrorHandler: " + event);
        }
        
        private function socketDataHandler(event:ProgressEvent):void {
            trace("socketDataHandler: " + event);
			receivetext = readUTFBytes(bytesAvailable);
		}
    }
}

socket文件的一些说明：

1、主要用到的函数是连接函数和读取，其他只是由于程序完整性列出。

2、由于客户端需要收到RGB值进行改变，所以需要添加read，即最后一个函数

mxml完整代码：

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
			   creationComplete="initApp()">
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import mx.utils.ColorUtil;

			public var socket:CustomSocket = new CustomSocket("127.0.0.1", 8001);
			protected function ChangeHandler():void{
				var brite:uint=slider.value;
				var adjustedColor:uint = ColorUtil.adjustBrightness(colorPicker.selectedColor, brite);
				box.setStyle("backgroundColor",adjustedColor);
				
				socket.writeUnsignedInt(colorPicker.selectedColor);
				socket.flush();//发送当前RGB
			}
			protected function initApp():void{
				socket.addEventListener(ProgressEvent.SOCKET_DATA,socketDataHandler);
			}
			protected function socketDataHandler(event:ProgressEvent):void{
				colorPicker.selectedColor = Number(Number("0x" + socket.receivetext).toString(10));
				box.setStyle("backgroundColor",colorPicker.selectedColor);
			}
			
		]]>
	</fx:Script>
	<mx:ColorPicker x="59" y="168" change="ChangeHandler()" id="colorPicker"/>
	<s:HSlider x="145" y="168" width="288" height="22"
			   maximum="150" minimum="0"
			   change="ChangeHandler()" id="slider"/>
	<s:Label x="145" y="198" text="亮度" height="19"/>
	<s:BorderContainer   x="57" y="257" id="box"/>
	<s:Label x="57" y="370" text="示范颜色" width="51" height="11"/>
</s:Application>

关于MXML的一些说明：

1、ColorPicker控件只根据选择的或者收到的RGB值显示颜色，对亮度没有影响，所以添加BorderContainer控件用于显示示范颜色，在收到socket发送的RGB值时，2个控件同时更新，所以直接将selectedColor属性赋值为收到的值，且container直接setStyle为selectedColor

2、考虑到socket发送值可能改变RGB值，所以程序启动就开始监听socket

3、Hslider和ColorPicker中值的变化都会改变显示，所以两个共用change响应函数。一点小问题是，当发送当前RGB到服务器验证的时候，由于滑动，会收到过多的数据

4、滑动条主要用到ColorUtil类。ColorUtil 类是一个全静态类，其方法用于处理 Flex 内的 RGB 颜色。不创建 ColorUtil 的实例；只是调用如 ColorUtil.adjustBrightness() 之类的静态方法。这里调用的adjustBrightness()方法，虽然理论上，第二个参数范围为 -255 到 255；-255　生成黑色，255 生成白色。如果此参数为 0，则返回的　RGB 颜色与原始颜色相同。不过这里由于调解后效果不明显，改为0-150了，另外，可以参考adjustBrightness2()方法。

5、本地服务器端用TCP&UDP测试工具

6、为了更清晰的表示RGB，我们可以参考网址1添加函数，然后label控件绑定，将colorPicker的selectedColor用如下函数：

		private function fixedInt(value:int, mask:String):String 
			{
				return String(mask + value.toString(16)).substr(-mask.length).toUpperCase(); 
			}

运行结果：

服务端输入RGB：66ff66后