openLaszlo转盘式菜单的实现

< canvas  width ="780"  height ="700" >
    
< view  name ="huan"  resource ="./res.png"  x ="200"  y ="400"  xoffset ="${this.width/2}"  yoffset ="${this.height/2}"
        xscale
="0.5"  yscale ="0.5"  onclick ="rotate()"  onmouseover ="lrg()"  onmouseout ="small()" >
        
< method  name ="lrg" >
       canvas.huan.enlarge.doStart();
    
</ method >
        
< method  name ="small" >
       canvas.huan.ensmall.doStart();
    
</ method >
        
< animatorgroup  name ="anm"  start ="false" >
            
< animator  attribute ="rotation"  to ="${canvas.huan.ratio}"  duration ="500"  start ="false"   />
            
< animatorgroup  start ="false"  process ="simultaneous"  motion ="easeboth" >
                
< animator  attribute ="xscale"  to =".5"  duration ="200"  start ="false"   />
                
< animator  attribute ="yscale"  to =".5"  duration ="200"  start ="false"   />
            
</ animatorgroup >
            
< animator  attribute ="x"  to ="130"  duration ="500"  start ="false"   />
            
< method  event ="onstop" >
        canvas.panel.exp.doStart();
      
</ method >
        
</ animatorgroup >
        
< animatorgroup  name ="enlarge"  start ="false"  process ="simultaneous"  motion ="easeboth" >
            
< animator  attribute ="xscale"  to ="0.7"  duration ="200"  start ="false"   />
            
< animator  attribute ="yscale"  to ="0.7"  duration ="200"  start ="false"   />
        
</ animatorgroup >
        
< animatorgroup  name ="ensmall"  start ="false"  process ="simultaneous"  motion ="linear" >
            
< animator  attribute ="xscale"  to ="0.5"  duration ="100"  start ="false"   />
            
< animator  attribute ="yscale"  to ="0.5"  duration ="100"  start ="false"   />
        
</ animatorgroup >
        
< method  name ="rotate" >
      
<![CDATA[
         var x = this.getMouse('x');
         var y = this.getMouse('y');
         var ratio = 0;
         if(canvas.huan.ratio != null) {            
            canvas.panel.inc.doStart();
          }
          if(x > 200 && y<200)
            ratio = 45;
          if(x < 200 && y<200)
            ratio = 135;
          if( x > 200 && y>200)
            ratio = 315;
          if( x < 200 && y>200)
            ratio = 225;
          canvas.huan.setAttribute('ratio',ratio);
          canvas.huan.anm.doStart();

        
]]>
      
</ method >
    
</ view >
    
< view  name ="panel"  x ="300"  y ="400"  width ="0"  height ="20"  bgcolor ="blue"  opacity ="0" >
        
< animatorgroup  name ="exp"  start ="false" >
            
< animator  attribute ="opacity"  to =".3"  duration ="1"  start ="false"   />
            
< animator  attribute ="width"  to ="400"  duration ="500"  start ="false"   />
            
< animatorgroup  start ="false"  process ="simultaneous" >
                
< animator  attribute ="y"  to ="300"  duration ="500"  start ="false"   />
                
< animator  attribute ="height"  to ="200"  duration ="500"  start ="false"   />
            
</ animatorgroup >
            
< method  event ="onstop" >
        canvas.panel.textbox.setVisible(true);
        
     
</ method >
        
</ animatorgroup >
        
< animatorgroup  name ="inc"  start ="false" >
            
< animatorgroup  start ="false"  process ="simultaneous" >
                
< animator  attribute ="y"  to ="400"  duration ="500"  start ="false"   />
                
< animator  attribute ="height"  to ="20"  duration ="500"  start ="false"   />
            
</ animatorgroup >
            
< animator  attribute ="width"  to ="0"  duration ="500"  start ="false"   />
            
< method  event ="onstop" >
        canvas.panel.textbox.setVisible(false);
     
</ method >
        
</ animatorgroup >
        
< text  name ="textbox"  visible ="false" > This is only a test </ text >
    
</ view >
</ canvas >

 res.png为转盘图片

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值