开启左侧

一个简单的拖动图形和文字的匹配例子

[复制链接]
想换个名字可以吗 发表于 2014-3-14 20:41:29 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
用fd写的例子
Main.as

  1. package
  2. {
  3.     import Flash.accessibility.AccessibilityProperties;
  4.     import flash.display.Sprite;
  5.     import flash.events.Event;
  6.     import flash.events.MouseEvent;
  7.     import flash.text.TextField;
  8.    
  9.     /**
  10.      * ...
  11.      * @author langxianmeng
  12.      */
  13.     public class Main extends Sprite
  14.     {
  15.         public var shapes:Array = new Array();
  16.         
  17.         public var currSpr:ShapeSpr ;
  18.         
  19.         public function Main():void
  20.         {
  21.             if (stage) init();
  22.             else addEventListener(Event.ADDED_TO_STAGE, init);
  23.         }
  24.         
  25.         private function init(e:Event = null):void
  26.         {
  27.             removeEventListener(Event.ADDED_TO_STAGE, init);
  28.             // entry point
  29.             var txtspr:TxtSpr = new TxtSpr('正方形');
  30.             this.addChild(txtspr);
  31.             
  32.             var txtspr1:TxtSpr = new TxtSpr('长方形',2);
  33.             this.addChild(txtspr1);
  34.             
  35.             shapes.push(txtspr);
  36.             shapes.push(txtspr1);
  37.             
  38.             txtspr1.x = txtspr.x + 200;
  39.             
  40.             
  41.             var squr:ShapeSpr = new ShapeSpr(1);            
  42.             this.addChild(squr);
  43.             squr.x = squr.y = 100;
  44.             
  45.             var squr1:ShapeSpr = new ShapeSpr(2);            
  46.             this.addChild(squr1);
  47.             squr1.x = squr1.y = 100;
  48.             squr1.x = squr.x + squr.width + 20;
  49.             
  50.             var squr2:ShapeSpr = new ShapeSpr(3);            
  51.             this.addChild(squr2);
  52.             squr2.x = squr2.y = 100;
  53.             squr2.x = squr1.x + squr1.width + 20;        
  54.             
  55.             this.addEventListener(MouseEvent.MOUSE_DOWN, this_mouseDown);            
  56.         }
  57.         
  58.         private function this_mouseDown(e:MouseEvent):void
  59.         {
  60.             trace("main mousedown");
  61.             this.currSpr = e.target as ShapeSpr;
  62.             this.addEventListener(Event.ENTER_FRAME, this_enterFrame);
  63.             trace(e.target.name);
  64.         }
  65.         
  66.         private function this_enterFrame(e:Event):void
  67.         {
  68.             for (var i:int = 0; i < shapes.length; i++) {
  69.                 if (this.currSpr.hitTestObject(shapes[i])) {
  70.                     if (currSpr.flag == TxtSpr(shapes[i]).flag) {
  71.                     //this.removeEventListener(Event.ENTER_FRAME, this_enterFrame);
  72.                     currSpr.stopDrag();
  73.                     //匹配后禁止拖动
  74.                     //currSpr.mouseEnabled = false;
  75.                     
  76.                     currSpr.x = TxtSpr(shapes[i]).x + ( TxtSpr(shapes[i]).width - currSpr.width) / 2;
  77.                     currSpr.y = TxtSpr(shapes[i]).y + TxtSpr(shapes[i]).height + 2;
  78.                     //停止拖动并自动排版
  79.                     //这里保存了对二者的引用,所以很容易进行排版
  80.                     //currSpr是当前拖动的图形
  81.                     //shapes[i]是文字
  82.                     //注意要流畅
  83.                     }
  84.                     }
  85.                
  86.             }
  87.         }
  88.         
  89.         
  90.         
  91.     }
  92.    
  93. }
复制代码

TxtSpr.as

  1. package  
  2. {
  3.     import flash.display.Sprite;
  4.     import flash.text.TextField;
  5.    
  6.     /**
  7.      * ...
  8.      * @author langxianmeng
  9.      */
  10.     public class TxtSpr extends Sprite
  11.     {
  12.         public var flag:int = 1;
  13.         
  14.         public function TxtSpr(str:String,flag:int=1)
  15.         {   
  16.             this.flag = flag;
  17.             
  18.             var txt:TextField = new TextField();
  19.             txt.height = 30;
  20.             txt.width = 60;
  21.             txt.mouseEnabled = false;
  22.             txt.text = str;
  23.             this.addChild(txt);
  24.             trace(txt.width);
  25.             this.graphics.beginFill(0xaaaaaa);
  26.             this.graphics.drawRect(0, 0, txt.width, txt.height);
  27.             this.graphics.endFill();
  28.             
  29.         }
  30.         
  31.     }

  32. }
复制代码

ShapeSpr.as

  1. package  
  2. {
  3.     import flash.display.Sprite;
  4.     import flash.events.MouseEvent;
  5.    
  6.     /**
  7.      * ...
  8.      * @author langxianmeng
  9.      */
  10.     public class ShapeSpr extends Sprite
  11.     {
  12.         public var flag:int;
  13.         
  14.         //是否匹配的标识
  15.         public var isMatched:Boolean;
  16.         
  17.         
  18.         public function ShapeSpr(flag:int)
  19.         {
  20.             this.buttonMode = true;
  21.             
  22.             this.flag = flag;
  23.             //根据flag标识绘制不同的图形
  24.             switch(flag) {
  25.                 case 1:
  26.                     this.drawSqur(); break;
  27.                 case 2:
  28.                     this.drawRect(); break;
  29.                 case 3:
  30.                     this.drawTri(); break;
  31.                
  32.                 default:;
  33.             }
  34.             
  35.             this.addEventListener(MouseEvent.MOUSE_DOWN, this_mouseDown);
  36.             this.addEventListener(MouseEvent.MOUSE_UP, this_mouseUp);
  37.             
  38.         }
  39.         //形状接口有待对外开放
  40.         //这样可以绘制同种图像的不同例子
  41.         //比如不同边长的长方形等
  42.         private function drawSqur():void {
  43.             this.graphics.beginFill(Math.random()*0xffffff);
  44.             this.graphics.drawRect(0, 0, 40, 40);
  45.             this.graphics.endFill();   
  46.             }
  47.         private function drawRect():void {
  48.             this.graphics.beginFill(Math.random()*0xffffff);
  49.             this.graphics.drawRect(0, 0, 80, 40);
  50.             this.graphics.endFill();   
  51.             }
  52.         private function drawTri():void {
  53.             this.graphics.beginFill(Math.random()*0xffffff);
  54.             this.graphics.lineTo(100, 0);
  55.             this.graphics.lineTo(0, 100);
  56.             this.graphics.lineTo(0, 0);
  57.             this.graphics.endFill();   
  58.             }
  59.         
  60.         
  61.         
  62.         public function this_mouseUp(e:MouseEvent):void
  63.         {
  64.             trace("up");
  65.             this.stopDrag();
  66.         }
  67.         
  68.         public function this_mouseDown(e:MouseEvent):void
  69.         {
  70.             trace("shapespr mouse down");
  71.             e.target.parent.setChildIndex(e.target,e.target.parent.numChildren-1)
  72.             //this.setChildIndex(this,this.parent.numChildren );
  73.             this.startDrag();
  74.         }
  75.         
  76.     }

  77. }
复制代码



DragDemo.rar

12.28 KB, 下载次数: 72

参与人数 1金钱 +30 贡献 +20 收起 理由
etthink + 30 + 20 原创,有自己观点

查看全部评分总评分 : 金钱 +30 贡献 +20

本帖被以下淘专辑推荐:

欢迎大家多发帖,参与讨论,增进彼此了解。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

推荐阅读更多+
会员达人更多+
广告位

最新信息

更多+

关注我们:教育技术人

官方微信

官方微博

教育技术热线:

13955453231

学教育技术,上教育技术论坛!

教育技术论坛征稿范围:教育技术应用案例、教程文章、优秀作品等。

Email:sf@etthink.com

Copyright   ©2007-2026  应用思考-教育技术论坛  Powered by©Discuz!  技术支持:且行资源    ( 皖ICP备10014945号-4 )