遮罩的使用

最新推荐文章于 2023-05-04 15:09:16 发布

xiaoxin888888

最新推荐文章于 2023-05-04 15:09:16 发布

阅读量731

点赞数

文章标签： function application button import library encoding

有N个按钮又不想其导航栏出现烦人的滚动条。

解决方法：使用flash的遮罩效果。

任何组件可以作为另外组件的遮罩，flash美工人员经常使用遮罩做效果，比如淡入淡出等。遮罩，顾名思义，就是遮掉某部分，但是这部分依然还是存在的。在flex当中，可视化组件有个mask的属性，指定其他组件ID可以就可以将其变成自身遮罩了。

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
      xmlns:s="library://ns.adobe.com/flex/spark"
      xmlns:mx="library://ns.adobe.com/flex/mx"
      minWidth="955"
      minHeight="600"
      creationComplete="application1_creationCompleteHandler(event)"
      xmlns:local="*"
      xmlns:skin="assets.skin.*"
      styleName="backgroundImage">

<fx:Script>
  <!--[CDATA[
   import assets.skin.CustomSkinableContainerSkin;

import mx.events.FlexEvent;

import spark.components.HGroup;

private var centerPoint:Point;

protected function application1_creationCompleteHandler(event:FlexEvent):void
   {
    // TODO Auto-generated method stub
    drawMap(1, 3);

addEventListener(Event.ENTER_FRAME, Run);

var container:HGroup=new HGroup();
    container.graphics.beginFill(0x442299);
    var commands:Vector.<int>=Vector.<int>([1, 2, 2, 2, 2]);
    var coords:Vector.<Number>=Vector.<Number>([132, 20, 46, 254, 244, 100, 20, 98, 218, 254]);
    container.graphics.drawPath(commands, coords);
    addElement(container);

userid.appendText("hello,world");

centerPoint=new Point(this.width / 2, this.height / 2);
   }

private function centerBtn(centerPoint:Point, radius:Number, btn:Button):void
   {

}

private function centerBtns():void
   {
    var radius:Number=500;
    var len:int=10;
    var constRadian:Number=Math.PI / 180;
    var totleRadian:Number=len * Math.PI / 180;

for (var i:int=0; i < len; i++)
    {
     var btn:Button=new Button();
     btn.width=50;
     btn.height=32;
     btn.label="我是label" + i;

btn.x=centerPoint.x + radius * Math.cos(i * constRadian);
     btn.y=centerPoint.y + radius * Math.sin(i * constRadian);

addElement(btn);
    }
   }

private function drawTangle(row:int, cos:int):void
   {
    for (var i:int=0; i < cos; i++)
    {
     for (var j:int=0; j < row; j++)
     {
      var mybutton:Mybutton=new Mybutton();

mybutton.x=600 + (i - j) * mybutton.width / 2;
      mybutton.y=400 + (i + j) * mybutton.height / 2;
      addElement(mybutton);
      trace(i + " " + j + "按钮坐标：" + mybutton.x + " " + mybutton.y);
     }
    }
   }

private function drawMap(row:int, cos:int):void
   {
    for (var i:int=0; i < cos; i++)
    {
     for (var j:int=0; j < row; j++)
     {
      var mybutton:Mybutton=new Mybutton();

mybutton.x=400 + (j - i) * mybutton.width / 2;
      mybutton.y=100 + (i + j) * mybutton.height / 2;
      addElement(mybutton);
     }
    }
   }

private function Run(event:Event):void
   {
    moveImage(imageGH, 240, 663 + 240);
   }

/**
    * @startPoint 参数是遮罩起始点 @endPoint 遮罩组件的结束点
    */
   private function moveImage(mc:*, startPoint:Number, endPoint:Number, ratio:Number=0.8):void
   {
    var temp:Number=mouseX;
    if (mouseX < startPoint)
    {
     temp=startPoint;
    }

if (mouseX > endPoint)
    {
     temp=endPoint;
    }

var k:Number=(temp - startPoint) / (endPoint - startPoint);
    mc.x+=((startPoint - (mc.width - (endPoint - startPoint)) * k) - mc.x) * ratio;

}

protected function maskCanvas_rollOverHandler(event:MouseEvent):void
   {
    // TODO Auto-generated method stub
   }

protected function maskCanvas_rollOutHandler(event:MouseEvent):void
   {
    // TODO Auto-generated method stub
   }

protected function imageGH_rollOverHandler(event:MouseEvent):void
   {
    addEventListener(Event.ENTER_FRAME, Run);

}

protected function imageGH_rollOutHandler(event:MouseEvent):void
   {
    removeEventListener(Event.ENTER_FRAME, Run);
   }
  ]]-->
 </fx:Script>
 <fx:Declarations>
  
 </fx:Declarations>
 <s:SkinnableContainer skinClass="assets.skin.CustomSkinableContainerSkin"
        width="600"
        height="300"
        x="552"
        y="10">

<s:VGroup horizontalCenter="0"
      verticalCenter="0">
   <mx:Form fontSize="16">
    <mx:FormItem label="Userid:">
     <s:TextInput id="userid"/>
    </mx:FormItem>
    <mx:FormItem label="Password:">
     <s:TextInput id="pw"/>
    </mx:FormItem>
    <mx:FormItem>
     <s:Button label="Login"/>
    </mx:FormItem>
   </mx:Form>
  </s:VGroup>
 </s:SkinnableContainer>
 <mx:Canvas x="240"
      y="299"
      width="663"
      height="274"
      backgroundColor="#ff0000"
      id="maskCanvas"
      cornerRadius="15"
      borderStyle="solid"
      rollOver="maskCanvas_rollOverHandler(event)"
      rollOut="maskCanvas_rollOutHandler(event)">
 </mx:Canvas>

<local:ImagesHGroup id="imageGH"
      mask="{maskCanvas}"
      cacheAsBitmap="true"
      x="488"
      y="500"/>
 <local:Mybutton x="82"
     y="200"
     width="164"
     height="81"/>
 <s:Graphic x="100"
      y="0">
  <s:BitmapImage source="assets/images/2.png"
        fillMode="repeat"
        width="500"
        height="500"/>

</s:Graphic>
</s:Application>