当前位置：文江博客话题详情

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

发布于 2024-08-24 04:30:11 字数 260 浏览 2 评论 0原文

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

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

谢谢...阿图尔

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

爱的十字路口 2024-08-31 04:30:11

看看这个：flexlib >图像映射。

摘自stackOverflow

回复收藏 0 原文

冷夜 2024-08-31 04:30:11

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

Use button skins based on a vector graphic (e.g., one made in Illustrator), save each state as a named symbol in the document, then export as SWF. Reference the skins as follows:

.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 will automatically determine the hit area from the visible portion. This example (not called "myfile.swf") is working for us right now in an application.

回复收藏 0 原文

陌路黄昏 2024-08-31 04:30:11

通过继承 Canvas 创建 ArrowButtonsHolder 类
创建 3 个也继承自 Canvas 的子类。例如左箭头按钮、中箭头按钮、右箭头按钮
公共类LeftArrowButton:Canvas {
受保护的覆盖函数 updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
```
 // 在此处绘制箭头
    // 使用图形来做到这一点 
    图形.beginFill(0xFF0000);
    图形.lineStyle(1, 0x000000);
    图形.moveTo(0, 0);
    图形.lineTo(30, 0);
    图形.lineTo(50, 25);
    图形.lineTo(30, 50);
    图形.lineTo(0, 50);
    图形.lineTo(0, 0);
    图形.endFill();
}
```
}
您还可以创建通用类 ArrowButton 并从该类继承另外 3 个类并重写绘图函数

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

public class ArrowButtonsHolder:Canvas {

// ...

私有变量 leftArrowButton:LeftArrowButton;
私有变量 middleArrowButton:MiddleArrowButton;
私有变量 rightArrowButton:RightArrowButton;

// ...

受保护的重写函数 createChildren():void {
    极好的（）;

    // 创建按钮
    左箭头按钮 = new 左箭头按钮();
    中间箭头按钮 = new 左箭头按钮();
    右箭头按钮 = new 左箭头按钮();

    // 将它们添加到画布上
    addChild(左箭头按钮);
    addChild(中间箭头按钮);
    addChild(右箭头按钮);

    // 通过调整 x, y 来定位这些按钮
    左箭头按钮.x = 0; 
    中间箭头按钮.x = 50; 
    右箭头按钮.x = 100; 

    // 分配事件监听器
    leftArrowButton.addEventListener(MouseEvent.CLICK, onLeftArrowButtonClick);
    middleArrowButton.addEventListener(MouseEvent.CLICK, onMiddleArrowButtonClick);
    rightArrowButton.addEventListener(MouseEvent.CLICK, onRightArrowButtonClick);
}

私人 onLeftArrowButtonClick(事件:MouseEvent):void
{
    trace("左键单击");
}

// .. 等等这里实现的另外 2 个方法

}

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

Create ArrowButtonsHolder class by inheriting from Canvas
Create 3 children classes also inherited from Canvas. For example 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();
}
```
}
You also can create general class ArrowButton and inherit another 3 from that class and override drawing function

Add this 3 child button object to ArrowButtonsHolder by overriding createChildren():void method

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: There might be tons of syntax mistakes in my code but you should get general idea how to do it

回复收藏 0 原文

~没有更多了~