apache-flex - 如何在 Flex 中管理不规则按钮形状上的鼠标点击

Question

在 Flex 中，我试图设计 3 个按钮，类似于在 http://www.freeimagehosting.net/uploads/f14d58b49e.jpg上传的图像

鼠标悬停/单击图像应仅适用于按钮的红色区域。如何在 Flex 中管理鼠标点击或不规则按钮形状？

Thnx ...阿图尔

Answer 1

看看这个：flexlib > ImageMap。

取自stackOverflow

Answer 2

1. 通过从 Canvas 继承创建 ArrowButtonsHolder 类

2. 创建 3 个子类也继承自 Canvas。例如 LeftArrowButton、MiddleArrowButton、RightArrowButton

   公共类 LeftArrowButton:Canvas { 受保护的覆盖函数 updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void { super.updateDisplayList(unscaledWidth, unscaledHeight);

       // draw your arrow here
       // use graphics to do it 
       graphics.beginFill(0xFF0000);
       graphics.lineStyle(1, 0x000000);
       graphics.moveTo(0, 0);
       graphics.lineTo(30, 0);
       graphics.lineTo(50, 25);
       graphics.lineTo(30, 50);
       graphics.lineTo(0, 50);
       graphics.lineTo(0, 0);
       graphics.endFill();
   }
   

   }

   您还可以创建通用类 ArrowButton 并从该类继承另一个 3 并覆盖绘图功能

3. 通过覆盖 createChildren():void 方法将此 3 个子按钮对象添加到 ArrowButtonsHolder

   public class ArrowButtonsHolder:Canvas {
   
   // ...
   
   private var leftArrowButton:LeftArrowButton;
   private var middleArrowButton:MiddleArrowButton;
   private var rightArrowButton:RightArrowButton;
   
   // ...
   
   protected override function createChildren():void {
       super();
   
       // create buttons
       leftArrowButton = new LeftArrowButton();
       middleArrowButton = new LeftArrowButton();
       rightArrowButton = new LeftArrowButton();
   
       // add them to canvas
       addChild(leftArrowButton);
       addChild(middleArrowButton);
       addChild(rightArrowButton);
   
       // position these button by adjusting x, y
       leftArrowButton.x = 0; 
       middleArrowButton.x = 50; 
       rightArrowButton.x = 100; 
   
       // assign event listeners
       leftArrowButton.addEventListener(MouseEvent.CLICK, onLeftArrowButtonClick);
       middleArrowButton.addEventListener(MouseEvent.CLICK, onMiddleArrowButtonClick);
       rightArrowButton.addEventListener(MouseEvent.CLICK, onRightArrowButtonClick);
   }
   
   private onLeftArrowButtonClick(event:MouseEvent):void
   {
       trace("Left button clicked");
   }
   
   // .. etc for another 2 methods implemented here
   

   }

PS：我的代码中可能存在大量语法错误，但您应该大致了解如何做到这一点

Answer 3

使用基于矢量图形的按钮皮肤（例如，在 Illustrator 中制作的），将每个状态保存为文档中的命名符号，然后导出为 SWF。参考皮肤如下：

.stepButton {
        upSkin: Embed(source="myfile.swf", symbol="StepButton"); 
        downSkin: Embed(source="myfile.swf", symbol="StepButtonDown");
        overSkin: Embed(source="myfile.swf", symbol="StepButtonOver");
        disabledSkin: Embed(source="myfile.swf", symbol="StepButtonDisabled");
}

Flash 将自动从可见部分确定命中区域。这个示例（不称为“myfile.swf”）现在在应用程序中为我们工作。