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

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

分几个技术点来说吧：

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方法将本次处理函数执行完后就立即阻止事件继续向上冒泡(即同一事件的其它监听函数将不会执行)。