10
2015
09

transformManager限制缩放and加入碰撞检测

greensock的transformManager还是很强大的,如果只是单纯实现鼠标操作变形的话,用起来也比较简单,创建一个实例,设置属性,然后把需要变形的元件addItem进去就可以了。

用Tweenlite的时候,往往一个to就够用了。但是在用transformManager的时候,经常需要加入一些限制或者扩展一些功能,实现起来就比较困难了。

之前就遇到过,选中的时候需要加入一个删除按钮,发现transformManager在MouseDown的时候就取消选择了,而我们一般都是要click才能删除,这样删除按钮就没办法和变形框同时消失。

限制变形区域比较简单,设置bounds属性就可以了。

限制缩放大小稍微麻烦一点,需要用TransformItem实例的setScaleConstraints方法。

其实最烦人的就是,要区分TransformManager,TransformItem,还有我们的DisplayObject,我们要不断的在这3个对象之间切换,所以很容易搞乱。

下面是重点,如何在使用TransformManager的同时,加入碰撞检测。

思路:

选中时,用变量trmLastState记录TransformManager的transform相关的属性(坐标,当前缩放比例,旋转角度);

变形时,先检测碰撞(用我们的DisplayObject),如果碰撞了,将TransformManager对象恢复到trmLastState状态(具体方法见下面源码),否则trmLastState记录TransformManager的当前状态。

具体代码:

package
{
	
	import com.greensock.events.TransformEvent;
	import com.greensock.transform.TransformItem;
	import com.greensock.transform.TransformManager;
	import flash.display.MovieClip;
	import flash.geom.Rectangle;
	
	public class Main extends MovieClip
	{
		
		public function Main()
		{
			// constructor code
			var trm:TransformManager = new TransformManager();
			trm.allowDelete = true;
			trm.hideCenterHandle = true;
			trm.scaleFromCenter = false;
			trm.constrainScale = false;
			trm.lockRotation = true;
			trm.arrowKeysMove = true;
			trm.allowDelete = false;
			trm.addEventListener(TransformEvent.SCALE, onTransformHandler);
			trm.addEventListener(TransformEvent.MOVE, onTransformHandler);
			trm.addEventListener(TransformEvent.SELECTION_CHANGE, onTransformSelectionChange);
			
			
			var clip1Item:TransformItem = trm.addItem(mc01);
			
			var clip1Item2:TransformItem = trm.addItem(mc02);
			
			
			var trmLastState:Object = {"sx": NaN, "sy": NaN, "mx": NaN, "my": NaN};
			function onTransformHandler(e:TransformEvent):void
			{
				if (mc01.hitTestObject(mc02))
				{
					
					/*
					//这样设置不行,属性是正确的,但是显示不对,应该是因为TransformManager里边是强制刷新的,这里如果想要改变显示状态,也要强制刷新才行。调用上面的方法来设置平移和缩放就可以了。
					trm.selectionScaleX = trmLastState.sx;
					trm.selectionScaleY = trmLastState.sy;
					trm.selectionX = trmLastState.mx;
					trm.selectionY = trmLastState.my;
					trace(trmLastState.sx,trmLastState.sy,trmLastState.mx,trmLastState.my);
					*/
				}
				else {
					trmLastState.sx=trm.selectionScaleX;
					trmLastState.sy=trm.selectionScaleY;
					trmLastState.mx=trm.selectionX;
					trmLastState.my=trm.selectionY;
				}
			}
			function onTransformSelectionChange(event:TransformEvent):void
			{
				
			}
		}
	
	}

}

效果如下,可以用鼠标拖动观察碰撞:

获得 Adobe Flash Player

源码打包下载

« 上一篇下一篇 »

相关文章:

方块碰撞和π  (2021-5-26 10:48:30)

场景的平移和缩放  (2020-6-8 9:1:2)

flash图形缩放时线条粗细不缩放  (2015-6-11 11:17:59)

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。