Question

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

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

Thnx ...... Atul

Answer 1

检查出来：flexlib＆gt;图像映射。

Answer 2

使用基于矢量图形的按钮外观（例如，在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”）现在正在应用程序中为我们工作。

Answer 3

通过继承Canvas
创建3个继承自Canvas的子类。例如LeftArrowButton，MiddleArrowButton，RightArrowButton

public class LeftArrowButton：Canvas { protected override function 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个并覆盖绘图函数

通过覆盖createChildren（）将此3子按钮对象添加到ArrowButtonsHolder：void方法

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

}

如何在Flex中管理鼠标单击不规则按钮形状

3 个答案: