《转》 头像上传编辑的处理思路

最近很多人遇到这些问题,我就分享一下个人做这些东西时候的经验吧,有不妥之处欢迎拍砖。

 

分几个技术点来说吧:

 

1.图片上传,主要是fileReference类,这是上传本地的图片。相关用法查API即可。

 

 

2.要想预览的话用fileReference.data,注意,此时SDK版本要高于3.2

 

 

3.有时候要截屏,这个主要用BitmapData.draw,示例函数如下   //快照功能函数 private function getBitmapData(target:UIComponent):BitmapData {  var bd:BitmapData=new BitmapData(target.width, target.height);  var m:Matrix=new Matrix();  bd.draw(target, m);  return bd; }

 

 

    然后用实例一个Bitmap(bd)就可以赋值给image.source了,当然还有其他的截屏方法,比如导入mx.graphics.ImageSnapshot;用ImageSnapshot.captureBitmapData(UIComponent)

 

 

 

4.拖拽嘛,类库里是提供了个StartDrag和stopDrag,不过那个能做的功能很有限,在拖拽的过程中要进行些逻辑判断就显得很乏力,我个人的经验是这样的。

首先,监听mouseDown,在mouseDown的时候再监听mouseMove和mouseUp;

然后,在mouseMove中可以自己写拖拽逻辑,很灵活,比如拖拽组件A,组件B可以跟随等等,设置拖拽边界也在这里进行;

最后,在mouseUp中remove以上监听函数。

当然有些人在mouseDown之前还用了一下mouseOver,这可以扩展更多的东西,做出更帅的拖拽体验。

建议这种东西写个类,以便复用,还有如果一个组件里面的元件比较多,也可以用拖拽位图的方式来优化一下,可以提高性能。在拖拽之前做个快照,然后组件设置为不可见,拖拽的其实只是张位图,然后拖拽完成之后,再把组件摆到相应位置,同时设置为可见。这个代码比较多就不贴了,了解思路就能做出来了。

 

 

 

5.拖拽加缩放,这个一般用第三方库,ObjectHandler个人认为比较不错。当然也可以自己写一个类,思路是差不多的,先写个Dot类,再写个DragBox类,拖拽思路还是mouseOver,mouseDown,mouseMove,mouseUp,适时的add和remove监听器,然后注意下用户体验,比如鼠标不能总是箭头吧或者拖拽的时候加点滤镜。或者增加点额外功能,比如拖拽点的数量,是否设置拖拽时长和宽的比例,加上这些东西复用性就更强了。

 

其实这些功能上的东西并不是特别难搞定,重要的还是设计出好的用户体验,想把这些技术综合应用的朋友一般都是想做头像上传功能组件吧。人人网和开心网上做的感觉用户体验就不是很好,白社会做的还是蛮犀利的,当然白是后出来的,现在后出来的都越来越好,听说QQ有个应用上的头像上传增加了人脸识别,那就更强大了。。。

 

 

 

 

as3.0中的事件冒泡机制有时候会很烦人,比如一个Sprite(方便下文描述就命名为Container吧)把另一外Sprite(称为Child吧)做为子元素套进来以后,如果两个Sprite都注册了Mouse_Down事件,要想在Child上点击鼠标时系统 只响应Child 的Mouse_Down事件,默认是不行的,因为事件冒泡会让Container也响应Mouse_Down事件.
要想阻止事件冒泡,可以在鼠标事件处理函数中调用e.stopImmediatePropagation()或stopPropagation()方法,即:
private function subChildMouseDownHandler(e:MouseEvent): void {
     e.stopImmediatePropagation();
     //或
     //e.stopPropagation();
     trace ( "_sub_child.MOUSE_DOWN" );
}

官方的解释:

stopImmediatePropagation():void
防止对事件流中当前节点中所有后续节点中的事件侦听器进行处理。 

stopPropagation():void
防止对事件流中当前节点后续节点中的所有事件侦听器进行处理。

小结:如果某对象的一个事件同时添加多个监听,stopPropagation将把该事件注册的所有监听处理函数执行完后,再阻止该事件继续向上冒泡;而stopImmediatePropagation方法将本次处理函数执行完后就立即阻止事件继续向上冒泡(即同一事件的其它监听函数将不会执行)。
 
 
 

你可能感兴趣的:(上传)