【原创】Flex图片上传、预览、裁剪、拖拽

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

 

分几个技术点来说吧：

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有个应用上的头像上传增加了人脸识别，那就更强大了。。。

评论

3 楼 qiqishou 2011-01-26  

chym_ouyj 写道

引用

然后用实例一个Bitmap(bd)就可以赋值给image.source了

我要上传到服务器这个新裁剪出来的图片怎么上传呢
“就可以赋值给image.source了”我要上传这个image显示的图片呢  怎么上传呢？
谢谢诶

可以把图像转成二进制流，然后用byteArray上传到服务器。网上有很多这种编码器，JPGEncoder,PNGEncoder之类的类

2 楼 chym_ouyj 2011-01-18  

引用

然后用实例一个Bitmap(bd)就可以赋值给image.source了

我要上传到服务器这个新裁剪出来的图片怎么上传呢
“就可以赋值给image.source了”我要上传这个image显示的图片呢  怎么上传呢？
谢谢诶

1 楼 sjpsega 2010-05-27  

不错，支持一下，很实用的技巧，呵呵，我开发中这些都遇到了，方法也类似。