Как управлять щелчками мыши на кнопках неправильной формы в Flex

В Flex я пытаюсь создать 3 кнопки, похожие на изображение, загруженное на http://www.freeimagehosting.net/uploads/f14d58b49e.jpg

Наведение мыши / щелчок по изображению должны работать только в области кнопки красного цвета. Как управлять щелчками мыши или кнопками неправильной формы в Flex?

Спасибо ... Атул


button shapes apache-flex
person Atul    schedule 01.03.2010    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Проверьте это: flexlib> ImageMap.

Взято из stackOverflow

person adamcodes    schedule 01.03.2010

arrow_upward
0
arrow_downward

Используйте обложки кнопок на основе векторной графики (например, созданную в 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");
}

Вспышка автоматически определит область попадания по видимой части. Этот пример (не называемый «myfile.swf») сейчас работает для нас в приложении.

person Robusto    schedule 01.03.2010

arrow_upward
0
arrow_downward

  1. Создайте класс ArrowButtonsHolder, унаследовав его от Canvas

  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. Добавьте этот объект 3 дочерних кнопок в ArrowButtonsHolder, переопределив метод createChildren (): 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

    }

PS: В моем коде может быть множество синтаксических ошибок, но вы должны получить общее представление, как это сделать.

person tefozi    schedule 02.03.2010