AS3-AS3图片裁切框

AS3-AS3图片裁切框

虐人心 发布于 2017-09-12 字数 126 浏览 1149 回复 3

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

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

虐人心 2017-11-09 3 楼

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

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

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

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

灵芸 2017-11-08 2 楼

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

源码链接

夜无邪 2017-09-17 1 楼

说下原理:
图片裁剪框,实际就是一个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();
}
}
}