白鹭引擎之Scroller容器

最近由我这个Unity3D大师负责公司H5项目，主要实现白鹭引擎Scroller滚动框中物体可以拖拽的效果，并且物体拖拽时，Scroller不可滚动。。。我这门外汉一听这要求，瞬间想打死策划。我研究了一下Scroller，首先，如果要想有物体跟着Scroller滚动，那该物体必须放到Scroller的Group中。but,问题来了，Group里的物体是不可以被拖到滚动框外的，这特码就尴尬了。

                  

不要着急，问题总会一件一件一件一件被解决掉的。

---------------------------------Scroller左右滚动------------------------------------

首先我们先让Scroller左右滚动起来，它有两个参数scrollPolicyV、scrollPolicyH，通过"ON""OFF""AUTO"可以控制上下左右可不可以滚动，在这里我们设置让它只能水平滚动   

        this.Scroller.scrollPolicyV = eui.ScrollPolicy.OFF;

        this.Scroller.scrollPolicyH = eui.ScrollPolicy.ON;

需要注意的是，不可以写成this.Scroller.scrollPolicyV = "OFF";this.Scroller.scrollPolicyH ="ON";否则Scroller上下左右都不会滚动了。下面四行代码是设置水平滑动条不可见：

        this.Scroller.horizontalScrollBar.autoVisibility = false;

        this.Scroller.horizontalScrollBar.visible = false;

--------------------------------物体可以被拖拽出来-----------------------------------

Group下的元素是不可以拖出来的，那只好在拖动那个元素（A）的时候，将该元素(A)隐藏，将外面的和它一样的元素(B)显示出来。此时遇到的问题是拖动元素的时候滚动框也会滚动，这效果就太差劲了。

我采取的解决办法是当鼠标左右滑动的时候，滚动条左右滑动，元素不可以被拖动；当鼠标向上滑动时，滚动条不动，元素开始拖动。但是鼠标不会标准的左右或上下滑动，很可能左上、右上，此时就需要特殊处理：水平移动距离小于垂直移动距离则视为鼠标向上滑动，水平移动距离大于等于垂直移动距离则视为鼠标左右滑动。

  

   this.choose_1.visible = false;

   this.choose_2.visible = false;

   this.choose_1_0.visible = true;

   this.choose_2_0.visible = true;

   this.choose_1.touchEnabled = true;

   this.choose_2.touchEnabled = true;

  记录点击到物体上的时候鼠标位置

   private oldImgX: number = 0;

   private oldImgY: number = 0;

  choose_1_0系列为Group里的元素，choose_1系列为外边的元素。

  this.choose_1_0.addEventListener(egret.TouchEvent.TOUCH_BEGIN, this.onImgClick, this);

  this.choose_2_0.addEventListener(egret.TouchEvent.TOUCH_BEGIN, this.onImgClick, this);

  this.addEventListener(egret.TouchEvent.TOUCH_MOVE, this.onMove, this);

  private onImgClick(event: egret.TouchEvent) {

        var btn: eui.Image = event.target;

        this.oldImgX = event.stageX;

        this.oldImgY = event.stageY;

    }

  private onMove(evt: egret.TouchEvent) {

        var btn: eui.Image = evt.target;

    以下代码为：鼠标垂直滑动大于水平滑动，元素（A）可以被拖动，A隐藏，B显示：

        if (Math.abs(evt.stageY - this.oldImgY) > (Math.abs(evt.stageX - this.oldImgX) + 5)) 

        {

            if (btn == this.choose_1_0) {

                console.log("1");

                this.choose_1.x = evt.stageX + this.Scroller.x;

                this.choose_1.y = this.choose_1_0.y + this.Scroller.y;

                // this.choose_1.y = this.Scroller.y + this.Scroller.height / 2;

                this.choose_1.visible = true;

                this.choose_1_0.visible = false;

            }

            if (btn == this.choose_2_0) {

                console.log("2");

                this.choose_2.x = evt.stageX + this.Scroller.x;

                this.choose_2.y = this.Scroller.y + this.Scroller.height / 2;

                this.choose_2.visible = true;

                this.choose_2_0.visible = false;

            }

    以下代码为：鼠标触发事件点在Scroller上方时（白鹭引擎原点在左上角），滚动条停止滚动：

           if (evt.stageY < this.Scroller.y) 

           {

               this.Scroller.scrollPolicyH = eui.ScrollPolicy.OFF;

           }

           else {

               this.Scroller.scrollPolicyH = eui.ScrollPolicy.ON;

           }

     以下代码为：物体跟随鼠标移动：

          this.touchImg = btn;

          if (this.touchImg != null) {

             if (this.touchImg == this.choose_1 || this.touchImg == this.choose_2)

             {

                this.touchImg.x += (evt.stageX - this.oldImgX);

                this.touchImg.y += (evt.stageY - this.oldImgY);

                if (this.touchImg.x < 0)

                    this.touchImg.x = 0;

                if (this.touchImg.x > this.stage.stageWidth - this.touchImg.width / 2)

                    this.touchImg.x = this.stage.stageWidth - this.touchImg.width / 2;

                if (this.touchImg.y < 0)

                    this.touchImg.y = 0;

                if (this.touchImg.y > this.stage.stageHeight - this.touchImg.height / 2)

                    this.touchImg.y = this.stage.stageHeight - this.touchImg.height / 2;

                this.oldImgX = evt.stageX;

                this.oldImgY = evt.stageY;

            }

         }

       }

                       

注意：

• event.stageX:点击在舞台中的位置的X坐标，以舞台左上角为（0，0）点
• event.localX:点击在物体身上的位置的X坐标，以物体的原点为（0，0）点