zoukankan      html  css  js  c++  java
  • 一起來玩鳥 Starling Framework(5)Multi-Touch

    這篇來談談Starling的Multi-Touch。前一篇也提到,Multi-Touch一樣是監聽TouchEvent.TOUCH,然後由TouchEvent的e.getTouches()取回多點的資訊。通常提到Multi-Touch會想到Gesture,不過Starling目前沒有GestureEvent可用。需要的時候只能自己動手寫。

    在開始練習之前,我們要回到Document Class,Main.as。要使用Multi-Touch,要先設定Starling Class的靜態屬性:

    Starling.multitouchEnabled = true; 

    然後Starling也提供了可以在電腦上用滑鼠模擬Multi-Touch的功能,這個功能則要在我們產生Starling實體之後,設定:

    _starling.simulateMultitouch = true; 


    設定好之後,我們來做個Multi-Touch,以及自訂Gesture的功能。我們在場景上放一個Image,然後為這個Image加上兩指縮放、旋轉、平移等功能。先把程式碼列出來:

    publicclassGame5extendsSprite
    {
    privatevar _container:Sprite;
    privatevar _image:Image;
    privatevar _msgText:TextField;
    [Embed(source ="/assets/head.png")]//embed一張圖給Image當Texture用
    privatestaticconstHeadBitmap:Class;

    publicfunctionGame5()
    {
    super();
    addEventListener(Event.ADDED_TO_STAGE, init);
    }

    privatefunction init(e:Event):void
    {
    removeEventListener(Event.ADDED_TO_STAGE, init);

    _container =newSprite();
    addChild(_container);
    addChild(newStats());

    _image =newImage(Texture.fromBitmap(newHeadBitmap()));//新增一個Image,貼上Texture
    _image.x =(stage.stageWidth - _image.width)>>1;//設定_image座標
    _image.y =(stage.stageHeight - _image.height)>>1;//設定_image座標
    _container.addChild(_image);//將_image加到場景上

    _msgText =newTextField(300,20,"","Arial",14,0xFF0000,true);//新增一個Texture來顯示訊息
    _msgText.x =100;
    _msgText.y =80;
    _msgText.hAlign =HAlign.LEFT;
    _container.addChild(_msgText);

    _image.addEventListener(TouchEvent.TOUCH, onTouch);//_image加上監聽TouchEvent.TOUCH
    }

    privatefunction onTouch(e:TouchEvent):void
    {
    var touches:Vector.<Touch= e.getTouches(this);//取出多個touches的資訊
    var target:Image=Image(e.target);//取得發出事件的target,在這裡只有_image

    if(touches.length ==1)//如果只有一點touch
    {
    var touch:Touch= touches[0];//取得唯一一點touch
    if(touch.phase ==TouchPhase.MOVED)//當這點在移動時
    {
    var currentPos:Point= touch.getLocation(target.parent);//取得這個touch的現在座標
    var previousPos:Point= touch.getPreviousLocation(target.parent);//取得這個touch的上一次座標
    target.x += currentPos.x - previousPos.x;//_image的x移動量為現在x座標減上次x座標
    target.y += currentPos.y - previousPos.y;//_image的y移動量為現在y座標減上次y座標
    }
    }

    if(touches.length ==2)//當touch有兩點時
    {
    var touchA:Touch= touches[0];//touchA為第一點
    var touchB:Touch= touches[1];//touchB為第二點

    var currentPosA:Point= touchA.getLocation(target.parent);//touchA現在座標
    var previousPosA:Point= touchA.getPreviousLocation(target.parent);//touchA上次座標
    var currentPosB:Point= touchB.getLocation(target.parent);//touchB現在座標
    var previousPosB:Point= touchB.getPreviousLocation(target.parent);//touchB上次座標

    var currentVector:Point= currentPosA.subtract(currentPosB);//現在兩點間的向量
    var previousVector:Point= previousPosA.subtract(previousPosB);//上一次兩點間的向量

    var currentAngle:Number=Math.atan2(currentVector.y, currentVector.x);//由現在向量算出現在弧度
    var previousAngle:Number=Math.atan2(previousVector.y, previousVector.x);//算出上一次弧度
    var deltaAngle:Number= currentAngle-previousAngle;//算出弧度差

    //以上一次兩點座標更新pivot
    var previousLocalA:Point= touchA.getPreviousLocation(target);//touchA的上一次座標(target自己的座標系)
    var previousLocalB:Point= touchB.getPreviousLocation(target);//touchB的上一次座標(target自己的座標系)
    target.pivotX =(previousLocalA.x + previousLocalB.x)*0.5;//以上次兩點中心為新的pivot
    target.pivotY =(previousLocalA.y + previousLocalB.y)*0.5;//以上次兩點中心為新的pivot

    //以現在兩點座標更新target座標
    target.x =(currentPosA.x + currentPosB.x)*0.5;//以現在兩點算出新座標
    target.y =(currentPosA.y + currentPosB.y)*0.5;//以現在兩點算出新座標

    //旋轉
    target.rotation += deltaAngle;//加上剛剛算出的旋轉量

    //縮放
    var sizeDiff:Number= currentVector.length / previousVector.length;//以前後兩的的向量長度比例算出縮放倍數
    target.scaleX *= sizeDiff;//乘上縮放倍數
    target.scaleY *= sizeDiff;//乘上縮放倍數
    }

    _msgText.text ="Touches number: "+ touches.length;//顯示現在touch點數
    }
    }


     
    我們可以以touch.getLocation()以及touch.getPreviousLocation()來取得這次與上次的座標,輸入的參數是用來當作標基準的DisplayObject。當只有單一一點touch,而且在移動時,則平移target(_image)。當兩點時,使用兩點的前後座標,算出新的pivot中心、旋轉、縮放、新座標等。詳細的算法請參考程式碼與註解。要注意算pivot時我們是以target(_image)當座標系,因為pivot本來就是以target座標系來算;其他部分則以target.parent為座標系,我們一般得到某個DisplayObject的x與y座標也是以那個DisplayObject的parent座標系來算。

    要使用模擬Multi-Touch,按住Ctrl可以看到兩個圓圈圖示,就代表兩個touch,移動滑鼠可以讓兩點往反方向移動。Ctrl+Shift可以讓兩點一起移動。Demo如下:

    一起來玩鳥 Starling Framework(5)Multi-Touch - randomclan - [Random]/v@ny
     

    點我或圖看Demo

  • 相关阅读:
    Attach Files to Objects 将文件附加到对象
    Provide Several View Variants for End-Users 为最终用户提供多个视图变体
    Audit Object Changes 审核对象更改
    Toggle the WinForms Ribbon Interface 切换 WinForms 功能区界面
    Change Style of Navigation Items 更改导航项的样式
    Apply Grouping to List View Data 将分组应用于列表视图数据
    Choose the WinForms UI Type 选择 WinForms UI 类型
    Filter List Views 筛选器列表视图
    Make a List View Editable 使列表视图可编辑
    Add a Preview to a List View将预览添加到列表视图
  • 原文地址:https://www.cnblogs.com/keng333/p/3334376.html
Copyright © 2011-2022 走看看