flex现实表情文字发送功能

最新推荐文章于 2023-04-06 09:39:15 发布

crurtyx

最新推荐文章于 2023-04-06 09:39:15 发布

阅读量495

点赞数

分类专栏： as flex 文章标签： flex function string encoding image actionscript

flex 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

其实这是一个利用canvas实现图片文字混排输出的功能，因为flex3无直接实现图片文字混排的组件，以下为主要核心代码

（1）test.mxml

   <?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:WarmC="WarmC.*">
<mx:Script>
  <![CDATA[
import render.SmilePanel;
  import mx.controls.Alert;
  import WarmC.MyCanvasArea;

private var pp:SmilePanel=new SmilePanel();
private function onSmileClick(event:Event):void{
   if(popB.popUp==null)popB.popUp=pp;
   pp.setSelectItem(null);
   popB.setVisible(true);
}

var myCanvas:MyCanvasArea;
private function initPopupPanel(event:Event):void{
   pp.init();
   pp.b=popB;
            popB.popUp=pp;
          // trace("myTAx="+myTA.x);

            // trace("myTAy="+myTA.y);
           myCanvas= new MyCanvasArea();
            myCanvas.id="myTA";
            myCanvas.x=0;
            myCanvas.y=0;
            myCanvas.width=282;
            myCanvas.height=165;
           myCanvas.setStyle("backgroundColor","#E4E3E3");

            vboxRe.addChild(myCanvas);
}

public var message:String;
public var message2:String;
public var text:String;
//插入表情
private function onSmileChange(event:Event):void{
if(pp.getSelectItem()){
  var start:int= toAccount1.selectionBeginIndex,end:int= toAccount1.selectionEndIndex;
  var p:String=":)["+pp.getSelectItem().data+"]";
// var s:String="/src=pic\"+pp.getSelectItem().data+".gif/";

  text= toAccount1.text;

  if(start===end){
     toAccount1.text=text.substring(0,start)+p+text.substring(start);
  }else{
     toAccount1.text=text+p;
  }
  pp.removeSelectItem();
    }
}

public function sendIM():void{

var spacer:String;
spacer="                                    ";
trace("22222=="+spacer.length);

var sTitle:String = new String("ActionScript Bible");
        sTitle = new String(sTitle.concat(" rocks!"));
        trace(sTitle.valueOf());
spacer.concat("11");
trace("333=="+spacer.length);
myCanvas.setMessage("me ( 16:31:50 ):")
trace(("me ( 16:31:50 ):                                    ").length);
myCanvas.setMessage(toAccount1.text);
toAccount1.text="";
message="";

//pp.removeSelectItem();
}

public function clean():void{
myCanvas.cleanAll();
vboxRe.removeAllChildren();
myCanvas= new MyCanvasArea();

            myCanvas.x=0;
            myCanvas.y=0;
            myCanvas.width=282;
            myCanvas.height=165;
           myCanvas.setStyle("backgroundColor","#E4E3E3");
            vboxRe.addChild(myCanvas);
}
  ]]>
</mx:Script>

<mx:VBox borderThickness="2" borderColor="#9C9991" borderStyle="solid" >

<mx:VBox id="vboxRe" borderThickness="2" borderColor="#9C9991" borderStyle="solid" height="172">

</mx:VBox>
<mx:Canvas height="23" width="100%">
  <mx:HBox height="23" width="100%">
  <mx:Image   source="pic/face_font.png" scaleContent="false" height="100%" />
</mx:HBox>
<mx:HBox   height="23" width="100%" horizontalGap="0">
  <mx:PopUpButton   borderColor="#ffffff" id="popB" click="onSmileClick(event)" close="onSmileChange(event)" creationComplete="initPopupPanel(event)" arrowButtonWidth="6" icon="@Embed('pic/face.png')" openAlways="true" width="40">
  </mx:PopUpButton>
  <mx:Label text="Emotions" verticalCenter="0" />
  <mx:Spacer width="10" />
  <mx:PopUpButton id="popUpButton_font" icon="@Embed('pic/face3.png')" arrowButtonWidth="6" openAlways="true" width="40">
  </mx:PopUpButton>
  <mx:Label text="Font" verticalCenter="0" />
</mx:HBox>
</mx:Canvas>
<mx:HBox   verticalCenter="0" width="100%">
<mx:TextInput id="toAccount1" cornerRadius="10" borderColor="#cccccc" height="26" width="174">
</mx:TextInput>
<mx:Button label="Send" click="sendIM();" />
<mx:Button label="Clean" click="clean()" />
</mx:HBox>
</mx:VBox>
</mx:Application>

（1）canvas的算法

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()" verticalScrollPolicy="on" horizontalScrollPolicy="off">
<mx:Script>
  <![CDATA[
   import mx.controls.Spacer;
   import mx.events.ScrollEventDirection;
   import mx.events.ScrollEvent;
   import mx.core.UITextField;
   import mx.core.UIComponent;
   import mx.events.FlexEvent;
   import mx.controls.Text;
   import mx.controls.Image;
   import flash.utils.setTimeout;

   private var fontSize:Number=12;

   private var Total_width:Number=17;
   private var totalChilders:int=0;
   private function init():void{
    Total_width=this.width-Total_width;
    this.setStyle("fontSize",fontSize);
    this.addEventListener(FlexEvent.UPDATE_COMPLETE,onUpdateComplete);
    this.addEventListener(ScrollEvent.SCROLL,onScrollHandle);
   }

   //发消息
   public function setMessage(message:String):void
   {

   // trace("message2222=="+message);
   // trace("l_x="+l_x+"l_y="+l_y);
    if(l_x!=0){
     l_x=0;
     l_y=max_y;
    }
    while(message.indexOf("//")!=-1)
     {message=message.replace("//","/");}
     //var s:String="/src=pic\"+pp.getSelectItem().data+".gif/";
     while(message.indexOf(":)[")!=-1){
     message=message.replace(":)[","/src=pic\");
     message=message.replace("]",".gif/");
     }

    var arr:Array=message.split("/");
    if(arr.length<=0){
     AddTextArea(message);
     totalChilders+=1;
    }else{
     totalChilders+=arr.length;
     for each(var item:String in arr){
      if(item.substr(0,4)=="src="){

       AddImage(item.substring(4));
      }else{
       AddTextArea(item);
      }
     }
    }

    ReLocal();
   }
   private function AddTextArea(text:String,index:int=0):void{
    var textField:Text=new Text();
    textField.htmlText=text;
    textField.setStyle("fontSize",fontSize);
    if(index==0)
     addChild(textField);
    else{
     addChildAt(textField,index);
     ReLocal();
    }
   }
   private var image:Image;
   private var spacer:Spacer;
   private function AddImage(src:String):void{
    image=new Image();
   // trace("src="+src);
    image.source=src;
   // addChild(spacer);
    addChild(image);
      }

   private var totalChilds:Number=0;

   private var l_x:Number=0;

   private var l_y:Number=0;

   private var max_y:Number=0;

   private var curr_y:Number=0;

   private var curr_child:DisplayObject=null;

   private var curr_childIndex:int=0;

   private var curr_row_left_width:Number=0;

   private var curr_row_string:String="";

   private var curr_row_left_string:String="";

   private var curr_row_left_length:int=0;
   private var Total_Childrens:int=0;
     private function ReLocal():void{
       Total_Childrens=getChildren().length;
     // trace("getChildren().length="+getChildren().length);
       if(totalChilders!=Total_Childrens){
        trace("加载未完成");
        setTimeout(ReLocal,10);
        return;
       }
       for(var i:int=curr_childIndex;i<Total_Childrens;i++){
        var curr_child:DisplayObject=getChildAt(i);
     if(curr_child.width==0){
      trace("当前加载未完成：",curr_child.name,i,Total_Childrens);
         setTimeout(ReLocal,10);
         return;
     }
     curr_childIndex++;
     if(l_x+curr_child.width<=Total_width){
      curr_child.x=l_x;
      curr_child.y=l_y;
      l_x+=curr_child.width;
      curr_y=curr_child.height+curr_child.y;
      max_y=curr_y>max_y?curr_y:max_y;
     }else{
      if(l_x>=Total_width||curr_child is Image){
       curr_child.x=l_x=0;
       l_x=curr_child.width+l_x;
       l_y=max_y;
       curr_child.y=l_y;
       curr_y=curr_child.height+curr_child.y;
       max_y=curr_y>max_y?curr_y:max_y;
      }else if(curr_child is Text){
       curr_row_left_width=Total_width-l_x;
       curr_row_string=(curr_child as Text).text;
       curr_row_left_length=getWidthCharCount(curr_row_string,curr_row_left_width);
       curr_row_left_string=curr_row_string.substr(0,curr_row_left_length);
       (curr_child as Text).text=curr_row_left_string;
       curr_child.x=l_x;
       curr_child.y=l_y;
       l_x=0;
       curr_y=curr_child.height+curr_child.y;
       max_y=curr_y>max_y?curr_y:max_y;
       l_y=max_y;
       totalChilders++;
       AddTextArea(curr_row_string.substr(curr_row_left_length),curr_childIndex);
      }
     }
    }
   }
   private var scorllable:Boolean=true;
   private function onScrollHandle(event:ScrollEvent):void{
    if(event.direction==ScrollEventDirection.VERTICAL){
     if(event.position>=maxVerticalScrollPosition){
      scorllable=true;
     }else{
      scorllable=false;
     }
    }
   }
   private function onUpdateComplete(event:FlexEvent):void{
    if(scorllable){
     verticalScrollPosition=maxVerticalScrollPosition;
     //if(maxVerticalScrollPosition>=1500)
      //setTimeout(cleanAll,1500);
    }
   }

   private var textMetrices:TextLineMetrics;
   private function getWidthCharCount(str:String,width:Number):int{
    textMetrices = measureHTMLText(str);
    if(textMetrices.width>width){
     return getWidthCharCount(str.substr(0,str.length-1),width);
    }else{
     return str.length;
    }

   }

   public function cleanAll():void{
    totalChilders=0;
    curr_childIndex=0;
    l_x=0;
    l_y=0;
    curr_y=0;
    this.removeAllChildren();
    this.validateNow();
   }
  ]]>
</mx:Script>
</mx:Canvas>

（2）表情控制面代码

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas backgroundColor="#ffffff" xmlns:mx="http://www.adobe.com/2006/mxml" width="204" height="172">
<mx:Script>
  <![CDATA[
   import mx.controls.PopUpButton;
   import mx.states.AddChild;
   import mx.events.FlexEvent;
   import mx.controls.Alert;
   import mx.controls.Image;

   private var total:int=134,pagesize:int=24;
   private var l:Loader;
   public var b:PopUpButton;
   private var selectItem:Object=null;

   [Bindable]
   private var cview:Array=[];
   [Bindable]
   private var totalPage:int=0;
   [Bindable]
   private var currentPage:int=0;

   public function init():void{
   //默认显示第一页
    viewPage(1);
    currentPage=1;
    totalPage = int((total-1+pagesize)/pagesize);

   }
   public function setSelectItem(obj:Object):void{
    selectItem=obj;
   }

   public function getSelectItem():Object{
    return PopPanel.selectedItem;
   }

           public function removeSelectItem():void{
           PopPanel.selectedItem=null;

           }

   //显示第N页
   private function viewPage(page:int):void{
    cview=[];
    var pos:int=(page-1)*pagesize;
    for(var i:int=0;i<pagesize;i++){
      var _index:int=pos+i;
      if(_index>total)_index=0;
      cview.push({label:""+_index,data:""+_index,ipath:"images/smile/"+_index+".gif"});
    };
   }

   private function onChange(event:Event):void{
     b.close();
   }

   private function viewNextPage(event:Event):void{
     if(currentPage==totalPage)return;
     currentPage=currentPage+1;
     viewPage(currentPage);
   }

  private function viewPreviousPage(event:Event):void{
    if(currentPage==1)return;
    currentPage=currentPage-1;
    viewPage(currentPage);
  }

  ]]>
</mx:Script>
<mx:TileList dataProvider="{cview}" id="PopPanel"
            maxColumns="6" change="onChange(event)" width="204" height="134" maxRows="4" itemRenderer="render.TitleItemRender">
      </mx:TileList>
<mx:Label x="6" y="137" text="{currentPage}/{totalPage}"/>
<mx:LinkButton x="79" y="138" label="上一页" click="viewPreviousPage(event)" width="60" fontSize="12"/>
<mx:LinkButton x="141" y="138" label="下一页" click="viewNextPage(event)" fontSize="12"/>
</mx:Canvas>

（3）表情图片框架

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox paddingLeft="4" paddingRight="4" paddingTop="4" paddingBottom="4" xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Image width="20" source="{data.ipath}" height="20"/>
</mx:VBox>

crurtyx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
flex现实表情文字发送功能

其实这是一个利用canvas实现图片文字混排输出的功能，因为flex3无直接实现图片文字混排的组件，以下为主要核心代码（1）test.mxml http://www.adobe.com/2006/mxml" layout="absolute" xmlns:Warm
复制链接

扫一扫