在制作工具时,有一个可以拖动和缩放对象的功能,想要使用控件实现。但是搜索了一圈发现没有合适的,所以自制了一个。应该还不错,发上来和大家分享一下。
不说什么了,看图
周围8个小方框可以实现修改对象大小,中间的那个实现拖动。点击另外的对象可以实现焦点的切换。
使用控件时,代码如下。(copy了一个Canvas中的代码)
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx" layout="absolute" creationComplete="inited()" width="600" height="400">
<fx:Script>
<![CDATA[
import org.xstudio.air.ObjectHandler;
public function inited():void{
ObjectHandler.addHandler(this, com_img);
ObjectHandler.addHandler(this, com_img2);
ObjectHandler.addHandler(this, com_btn);
}
]]>
</fx:Script>
<mx:Button x="105" y="82" label="按钮" id="com_img" width="77" height="60"/>
<mx:Button x="32" y="267" label="按钮2" id="com_img2" width="95" height="54"/>
<mx:Button x="188" y="229" label="按钮3" id="com_btn" width="78" height="62"/>
</mx:WindowedApplication>
使用的ObjectHandler控件的源代码如下
package org.xstudio.air
{
import flash.display.DisplayObject;
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.geom.Point;
import mx.core.Container;
/**
* Air使用的对象拖动和缩放的控件
*
* @author cuilichen
*
* @date May 2nd, 2012
*
*/
public class ObjectHandler
{
//操作的小矩形框的大小
private static const HandlerSize:int = 10;
//本类的公共对象
private static var focusObjectHandler:ObjectHandler;
//对象的容器
private var container:Container;
//实际控制对象
private var widget:DisplayObject;
//9个可拖动框
private var rects:Array = [];
//当前正在操作的句柄
private var currRect:Sprite;
//是否可改变大小
private var sizeable:Boolean;
/**
* 构造方法
*
* @param container
* @param single
*
*/
public function ObjectHandler(container:Container, single:Single){
if(single == null){
throw new Error("ObjectHandler new error.");
}
this.container = container;
rects = [];
for(var i:int = 0; i < 9; i++){
var rect:Sprite = createRectHandler();
rect.addEventListener(MouseEvent.MOUSE_DOWN, evt_rect_mouse_down);
rect.addEventListener(MouseEvent.MOUSE_UP, evt_rect_mouse_up);
rects[i] = rect;
}
container.addEventListener(MouseEvent.MOUSE_UP, evt_container_mouse_up);
}
/**
* 静态方法,添加对象处理的句柄
*
* @param container
* @param widget
* @param sizeable
*
*/
public static function addHandler(container:Container, widget:DisplayObject, sizeable:Boolean = true):void{
var handler:ObjectHandler = new ObjectHandler(container, new Single());
handler.addWidget(widget, sizeable);
}
/**
* 添加显示对象
*
* @param _widget
* @param sizeable
*
*/
private function addWidget(_widget:DisplayObject, sizeable:Boolean):void{
if (widget && widget.parent){
widget.parent.removeChild(widget);
}
this.sizeable = sizeable;
widget = _widget;
var p1:Point = new Point(widget.x, widget.y);
var p2:Point = new Point(widget.x + widget.width, widget.y + widget.height);
widget.addEventListener(MouseEvent.CLICK, evt_change_focus);
setRectsPos(p1, p2);
if (focusObjectHandler == null){
setFocus(this);
}
}
/**
* 在控件上点击鼠标左键
*
* @param e
*
*/
private function evt_change_focus(e:MouseEvent):void{
setFocus(this);
}
/**
* 在容器上按下鼠标左键
*
* @param e
*
*/
private function evt_container_mouse_up(e:MouseEvent):void{
if (currRect){
currRect.stopDrag();
}
container.removeEventListener(MouseEvent.MOUSE_MOVE, evt_mouse_move);
}
/**
* 在句柄上按下鼠标左键
*
* @param e
*
*/
private function evt_rect_mouse_down(e:MouseEvent):void{
var rect:Sprite = e.currentTarget as Sprite;
rect.startDrag();
currRect = rect;
container.addEventListener(MouseEvent.MOUSE_MOVE, evt_mouse_move);
}
/**
* 在句柄上松开鼠标左键
*
* @param e
*
*/
private function evt_rect_mouse_up(e:MouseEvent):void{
var rect:Sprite = e.currentTarget as Sprite;
rect.stopDrag();
currRect = null;
container.removeEventListener(MouseEvent.MOUSE_MOVE, evt_mouse_move);
}
/**
* 拖动矩形句柄,鼠标移动
*
*/
private function evt_mouse_move(e:MouseEvent):void{
if (currRect) {
updatePosition(currRect);
}
}
/**
* 当某个句柄移动时,调整相应句柄的位置
*
* @param rect
*
*/
private function updatePosition(rect:Sprite):void{
var ind:int = rects.indexOf(rect);
var p1:Point = new Point(rects[0].x, rects[0].y);
var p2:Point = new Point(rects[7].x, rects[7].y);
if (ind == 0){//左上角
p1.x = rect.x;
p1.y = rect.y;
} else if (ind == 1){//上部
p1.y = rect.y;
} else if (ind == 2){//右上角
p2.x = rect.x;
p1.y = rect.y;
} else if (ind == 3){//左边
p1.x = rect.x;
} else if (ind == 4){//右边
p2.x = rect.x;
} else if (ind == 5){//左下角
p1.x = rect.x;
p2.y = rect.y;
} else if (ind == 6){//下边
p2.y = rect.y;
} else if (ind == 7){//右下角
p2.x = rect.x;
p2.y = rect.y;
} else if (ind == 8){//中间的
var w:Number = p2.x - p1.x;
var h:Number = p2.y - p1.y;
p1.x = rect.x - w / 2;
p1.y = rect.y - h / 2;
p2.x = p1.x + w;
p2.y = p1.y + h;
}else {
throw new Error("No such a handler");
}
setRectsPos(p1, p2);
}
/**
* 当前对象是否是焦点的操作对象
*
*
*/
private function setOperating(value:Boolean):void
{
var i:int;
var handler:Sprite;
var start:int = sizeable? 0 : 8;
if (value){//可操作
for(i = start; i < rects.length; i++){
handler = rects[i]
container.rawChildren.addChild(handler);
}
} else {//不可操作
for(i = start; i < rects.length; i++){
handler = rects[i]
if (handler.parent){
handler.parent.removeChild(handler);
}
}
}
}
/**
* 创建句柄,用来拖动和拉伸对象
*
*/
private function createRectHandler():Sprite{
var img:Sprite = new Sprite();
var size:int = 10;
img.graphics.beginFill(0x00ffff, 0.5);
img.graphics.drawRect(-size / 2, -size / 2, size, size);
img.graphics.endFill();
img.graphics.lineStyle(1, 0);
img.graphics.drawRect(-size / 2, -size / 2, size, size);
return img;
}
/**
* 设定各个句柄的位置
*
* @param p1
* @param p2
*
*/
private function setRectsPos(p1:Point, p2:Point):void{
if (p1.x > p2.x){//判定,并且保证 p1 在 p2 的左上方
var value:Number = p1.x;
p1.x = p2.x;
p2.x = value;
}
if (p1.y > p2.y){//判定,并且保证 p1 在 p2 的左上方
value = p1.y;
p1.y = p2.y;
p2.y = value;
}
rects[0].x = p1.x;
rects[0].y = p1.y;
rects[1].x = (p1.x + p2.x) / 2;
rects[1].y = p1.y;
rects[2].x = p2.x;
rects[2].y = p1.y;
rects[3].x = p1.x;
rects[3].y = (p1.y + p2.y) / 2;
rects[4].x = p2.x;
rects[4].y = (p1.y + p2.y) / 2;
rects[5].x = p1.x;
rects[5].y = p2.y;
rects[6].x = (p1.x + p2.x) / 2;
rects[6].y = p2.y;
rects[7].x = p2.x;
rects[7].y = p2.y;
rects[8].x = (p1.x + p2.x) / 2;
rects[8].y = (p1.y + p2.y) / 2;
//改变对象大小
widget.x = p1.x;
widget.y = p1.y;
widget.width = p2.x - p1.x;
widget.height = p2.y - p1.y;
}
/**
* 设定当前焦点对象
*
*/
private static function setFocus(value:ObjectHandler):void
{
if (focusObjectHandler){
focusObjectHandler.setOperating(false);
}
focusObjectHandler = value;
if(focusObjectHandler){
focusObjectHandler.setOperating(true);
}
}
}
}class Single{}
应该说使用起来还是比较简单的。不知道大家有没有什么更好的办法或者思路,欢迎交流。