as3图片上传预览,图片上面会出现一个伸缩框,然后可以根据伸缩框裁剪图片,类似于discuz上传头像效果,这个效果怎么做出来的?

2010-11-15 02:25:01

3 Answers

说下原理:
图片裁剪框,实际就是一个Shape或者Sprite,里面包含了四个或者八个控制方块(控制区),这些控制区根据鼠标事件移动改变裁剪区的大小。

从以前做的一个项目中拿出来的,稍微修改了下,可以直接使用:

addChild(new Clip());//支持八个方向任意调整

源码:

package { import flash.display.Bitmap; import flash.display.BitmapData; import flash.display.Sprite; import flash.events.Event; import flash.events.MouseEvent; public class Clip extends Sprite { private var m_selectBox:Bitmap; private var m_dotBmpd:BitmapData; private var m_dotTopLeft:Sprite; private var m_dotTop:Sprite; private var m_dotTopRight:Sprite; private var m_dotLeft:Sprite; private var m_dotRight:Sprite; private var m_dotBottomLeft:Sprite; private var m_dotBottom:Sprite; private var m_dotBottomRight:Sprite; private var m_target:Sprite; private var m_dotWidth:uint; private var m_dotHeight:uint; private var m_oldMouseX:int; private var m_oldMouseY:int; public function Clip() { this.m_selectBox = new Bitmap(new BitmapData(10, 10, true, 0x20ff0000)); this.m_dotBmpd = new BitmapData(5, 5, false, 0); this.createSelection(); } private function createSelection():void { this.addChild(this.m_selectBox); var bmd:BitmapData = this.m_dotBmpd; this.m_dotWidth = bmd.width; this.m_dotHeight = bmd.height; this.m_dotLeft = new Sprite(); this.m_dotLeft.addChild(new Bitmap(bmd)); this.m_dotRight = new Sprite(); this.m_dotRight.addChild(new Bitmap(bmd)); this.addChild(this.m_dotLeft); this.addChild(this.m_dotRight); this.m_dotLeft.addEventListener(MouseEvent.MOUSE_DOWN, this.mouseEventHandler); this.m_dotRight.addEventListener(MouseEvent.MOUSE_DOWN, this.mouseEventHandler); this.m_dotTop = new Sprite(); this.m_dotTop.addChild(new Bitmap(bmd)); this.m_dotBottom = new Sprite(); this.m_dotBottom.addChild(new Bitmap(bmd)); this.addChild(this.m_dotTop); this.addChild(this.m_dotBottom); this.m_dotTop.addEventListener(MouseEvent.MOUSE_DOWN, this.mouseEventHandler); this.m_dotBottom.addEventListener(MouseEvent.MOUSE_DOWN, this.mouseEventHandler); this.m_dotBottomLeft = new Sprite(); this.m_dotBottomLeft.addChild(new Bitmap(bmd)); this.m_dotBottomRight = new Sprite(); this.m_dotBottomRight.addChild(new Bitmap(bmd)); this.m_dotTopLeft = new Sprite(); this.m_dotTopLeft.addChild(new Bitmap(bmd)); this.m_dotTopRight = new Sprite(); this.m_dotTopRight.addChild(new Bitmap(bmd)); this.addChild(this.m_dotBottomLeft); this.addChild(this.m_dotBottomRight); this.addChild(this.m_dotTopLeft); this.addChild(this.m_dotTopRight); this.m_dotBottomLeft.addEventListener(MouseEvent.MOUSE_DOWN, this.mouseEventHandler); this.m_dotBottomRight.addEventListener(MouseEvent.MOUSE_DOWN, this.mouseEventHandler); this.m_dotTopLeft.addEventListener(MouseEvent.MOUSE_DOWN, this.mouseEventHandler); this.m_dotTopRight.addEventListener(MouseEvent.MOUSE_DOWN, this.mouseEventHandler); this.m_selectBox.width = 100; this.m_selectBox.height = 100; this.updateDotPosition(); } private function updateDotPosition():void { var width:uint = this.m_selectBox.width; var height:uint = this.m_selectBox.height; var dotHalfWidth:uint = this.m_dotWidth >> 1; var dotHalfHeight:uint = this.m_dotHeight >> 1; this.m_dotLeft.x = -dotHalfWidth + this.m_selectBox.x; this.m_dotRight.x = width - dotHalfWidth - 1 + this.m_selectBox.x; this.m_dotLeft.y = this.m_dotRight.y = (height >> 1) - dotHalfHeight + this.m_selectBox.y; this.m_dotTop.x = this.m_dotBottom.x = (width >> 1) - dotHalfWidth + this.m_selectBox.x; this.m_dotTop.y = -dotHalfHeight + this.m_selectBox.y; this.m_dotBottom.y = height - dotHalfHeight - 1 + this.m_selectBox.y; this.m_dotTopLeft.x = this.m_dotBottomLeft.x = -dotHalfWidth + this.m_selectBox.x; this.m_dotTopLeft.y = this.m_dotTopRight.y = -dotHalfHeight + this.m_selectBox.y; this.m_dotBottomLeft.y = this.m_dotBottomRight.y = height - dotHalfHeight - 1 + this.m_selectBox.y; this.m_dotTopRight.x = this.m_dotBottomRight.x = width - dotHalfWidth - 1 + this.m_selectBox.x; } private function mouseEventHandler(evt:MouseEvent):void { switch(evt.type) { case MouseEvent.MOUSE_DOWN: evt.stopImmediatePropagation(); this.m_oldMouseX = stage.mouseX; this.m_oldMouseY = stage.mouseY; this.m_target = Sprite(evt.currentTarget); stage.addEventListener(MouseEvent.MOUSE_MOVE, this.mouseEventHandler); stage.addEventListener(MouseEvent.MOUSE_UP, this.mouseEventHandler); break; case MouseEvent.MOUSE_UP: this.stopDrag(); this.m_target = null; stage.removeEventListener(MouseEvent.MOUSE_MOVE, this.mouseEventHandler); stage.removeEventListener(MouseEvent.MOUSE_UP, this.mouseEventHandler); break; case MouseEvent.MOUSE_MOVE: var offsetX:int = stage.mouseX - this.m_oldMouseX; var offsetY:int = stage.mouseY - this.m_oldMouseY; var width:uint = this.m_selectBox.width; var height:uint = this.m_selectBox.height; switch(this.m_target) { case this.m_dotTop: this.changeHeightY(offsetY, height, this.m_dotBottom); break; case this.m_dotBottom: this.changeHeight(offsetY, height, this.m_dotTop); break; case this.m_dotLeft: this.changeWidthX(offsetX, width, this.m_dotRight); break; case this.m_dotRight: this.changeWidth(offsetX, width, this.m_dotLeft); break; case this.m_dotTopLeft: this.changeWidthX(offsetX, width, this.m_dotTopRight); if (this.m_target == this.m_dotTopRight) { this.changeHeightY(offsetY, height, this.m_dotBottomRight); }else { this.changeHeightY(offsetY, height, this.m_dotBottomLeft); } break; case this.m_dotTopRight: this.changeWidth(offsetX, width, this.m_dotTopLeft); if (this.m_target == this.m_dotTopLeft) { this.changeHeightY(offsetY, height, this.m_dotBottomLeft); }else { this.changeHeightY(offsetY, height, this.m_dotBottomRight); } break; case this.m_dotBottomLeft: this.changeWidthX(offsetX, width, this.m_dotBottomRight); if (this.m_target == this.m_dotBottomRight) { this.changeHeight(offsetY, height, this.m_dotTopRight); }else { this.changeHeight(offsetY, height, this.m_dotTopLeft); } break; case this.m_dotBottomRight: this.changeWidth(offsetX, width, this.m_dotBottomLeft); if (this.m_target == this.m_dotBottomLeft) { this.changeHeight(offsetY, height, this.m_dotTopLeft); }else { this.changeHeight(offsetY, height, this.m_dotTopRight); } break; } break; } } private function changeWidth(offset:int, width:uint, nextTarget:Sprite):void { if (offset == 0) return; offset = width + offset; if (offset < 1) { this.m_selectBox.x += offset; this.m_selectBox.width = Math.abs(offset) + 1; this.m_target = nextTarget; }else { this.m_selectBox.width = offset; } this.m_oldMouseX = stage.mouseX; this.updateDotPosition(); } private function changeWidthX(offset:int, width:uint, nextTarget:Sprite):void { if (offset == 0) return; offset = width - offset; if (offset < 1) { this.m_selectBox.x += width - 1; this.m_selectBox.width = Math.abs(offset) + 1; this.m_target = nextTarget; }else { this.m_selectBox.width = offset; this.m_selectBox.x += width - offset; } this.m_oldMouseX = stage.mouseX; this.updateDotPosition(); } private function changeHeight(offset:int, height:uint, nextTarget:Sprite):void { if (offset == 0) return; offset = height + offset; if (offset < 1) { this.m_selectBox.y += offset; this.m_selectBox.height = Math.abs(offset) + 1; this.m_target = nextTarget; }else { this.m_selectBox.height = offset; } this.m_oldMouseY = stage.mouseY; this.updateDotPosition(); } private function changeHeightY(offset:int, height:uint, nextTarget:Sprite):void { if (offset == 0) return; offset = height - offset; if (offset < 1) { this.m_selectBox.y += height - 1; this.m_selectBox.height = Math.abs(offset) + 1; this.m_target = nextTarget; }else { this.m_selectBox.height = offset; this.m_selectBox.y += height - offset; } this.m_oldMouseY = stage.mouseY; this.updateDotPosition(); } } }

2010-11-15 04:31:36

恩... 这个可以考虑用jquery做。。

做的话难度不大,但是样式可能比实现要难些,主要也是样式兼容问题。
大致需要四部步:
1 鼠标移动到 图片上 mousedown 的时候记录 鼠标指针在图片上的坐标,
2 mousedown 后 绑定 mousemove 事件,通过此事件来 勾画 选区框
3 当触发 mouseup 的时候 再记录 鼠标指针在图片上的坐标
4 用户选定区域确定后,将记录的两次坐标提交给后端,用程序截图

比如 当鼠标在 图片上 坐标为 50,20 的时候按下,又移动到 120,40 松开鼠标,此时就能确定用户选区的范围,及一个 长70 高20的长方形。

这中方法只适用于图片已经存在于服务器端,或是 一个 图片的 web地址。如果是用户上传的图片,那么就得先解决图片如何回显的问题。。

2010-11-15 06:16:02

主要设计思路是:
1.获取用户当前上传的完整图片
2.创建出矩形选择框,可以拖拽,框右下角是用户点击拖拽时的热点区域,然后算出用户拖拽区域的大小,并实现有2种图片规格的大小(网页常见的大头像、小头像)
3.AS3 使用BitmapData复制出选择框区域中的图像数据,主要使用矩阵Matrix来计算获取选中图像
4.创建不同规格大小的图片,上传到服务器。
5.完成。

源码链接

2010-11-15 07:13:32
您不能回答该问题或者回答已经关闭!

相关文章推荐

  • C#中using指令的几种用法

    using + 命名空间名字,这样可以在程序中直接用命令空间中的类型,而不必指定类型的详细命名空间,类似于Java的import,这个功能也是最常用的,几乎每个cs的程序都会用到

  • C#实例解析适配器设计模式

    将一个类的接口变成客户端所期待的另一种接口,从而使原本因接口不匹配而无法在一起工作的两个类能够一起工作

  • C#开发高性能Log Help类设计开发

    项目中要在操作数据库的异常处理中加入写Log日志,对于商业上有要求,写log时对其它操作尽可能影响小,不能因为加入log导致耗时太多

  • 使用托管C++粘合C#和C++代码(二)

    本文实现一下C++代码调用C#代码的过程。我构造一个简单并且直观的例子:通过C++ UI 触发C# UI.

  • C#开发中的反射机制

    反射的定义:审查元数据并收集关于它的类型信息的能力。元数据(编译以后的最基本数据单元)就是一大堆的表,当编译程序集或者模块时,编译器会创建一个类定义表,一个字段定义表,和一个方法定义表等

  • Async和Await使异步编程更简单

    C#5.0中async和await两个关键字,这两个关键字简化了异步编程,之所以简化了,还是因为编译器给我们做了更多的工作

  • C#运行时相互关系

    C#运行时相互关系,包括运行时类型、对象、线程栈和托管堆之间的相互关系,静态方法、实例方法和虚方法的区别等等

  • C#协变和逆变

    “协变”是指能够使用与原始指定的派生类型相比,派生程度更大的类型,“逆变”则是指能够使用派生程度更小的类型

  • C#基础概念之延迟加载

    延迟加载(lazy load)是Hibernate3关联关系对象默认的加载方式,延迟加载机制是为了避免一些无谓的性能开销而提出来的,所谓延迟加载就是当在真正需要数据的时候,才真正执行数据加载操作

  • C#中的索引器的简单理解和用法

    C#中的类成员可以是任意类型,包括数组和集合。当一个类包含了数组和集合成员时,索引器将大大简化对数组或集合成员的存取操作

  • 使用托管C++粘合C#和C++代码(一)

    C#在xml读写,数据库操纵,界面构造等很多方面性能卓越;C++的效率高,是底层开发的必备武器

  • 深入C# 序列化(Serialize)、反序列化(Deserialize)

    C#中的序列化和反序列化,序列化是.NET运行时环境用来支持用户定义类型的流化的机制