flex Как нарисовать поверх изображения - PullRequest
Новая
       9

flex Как нарисовать поверх изображения

1 голос
/ 29 марта 2012

Я хотел бы реализовать что-то простое (подумал я!), Но нет. Я хотел бы нарисовать изображение. Я создал новый компонент DrawingImg, который расширяет s: Image 

public class DrawingImg extends Image

{
    private var isDrawing:Boolean = false;
    private var x1:int;
    private var y1:int;
    private var x2:int;
    private var y2:int;

    public var drawColor:uint = 0x000000;

    public function DrawingImg()
    {
        super();

        addEventListener(FlexEvent.CREATION_COMPLETE, function(event:FlexEvent):void {
            erase();
        });

        addEventListener(MouseEvent.MOUSE_DOWN, function(event:MouseEvent):void {
            x1 = mouseX;
            y1 = mouseY;
            isDrawing = true;
        });

        addEventListener(MouseEvent.MOUSE_MOVE, function(event:MouseEvent):void {
            if (!event.buttonDown){
                isDrawing = false;
            }
            x2 = mouseX;
            y2 = mouseY;
            if (isDrawing){
                graphics.lineStyle(2, drawColor);
                graphics.moveTo(x1, y1);
                graphics.lineTo(x2, y2);
                x1 = x2;
                y1 = y2;
            }
        });

        addEventListener(MouseEvent.MOUSE_UP, function(event:MouseEvent):void {
            isDrawing = false;
        });
    }

    public function erase():void  {
        graphics.beginFill(0xffffff, 0.00001);
        graphics.drawRect(0, 0, width, height);
        graphics.endFill();
    }
}
}

вот мой взгляд: 

<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" title="GiftCertificateView" 
actionBarVisible="false" xmlns:local="*">
<local:DrawingImg source="/assets/dessin.png"  width="100%" height="100%"/>
</s:View>

Это "близко" к работе, когда моя мышь находится вне изображения, я могу нарисовать линию, но когда я нахожусь над изображением, ничего не появляется? У кого-нибудь есть идея?

1 Ответ

0 голосов
/ 02 апреля 2012

Проблема в том, что вы не можете рисовать на изображении искры с помощью графического API.В последнее время я не смотрел на источник, поэтому не могу точно сказать, почему.

Быстрое решение было бы сделать ваш класс DrawingImg расширенным UIComponent вместо Image: 

public class DrawingImage extends UIComponent

Теперь нарисуйте ваш компонент рисования поверх изображения в вашем представлении: 

<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"xmlns:s="library://ns.adobe.com/flex/spark" title="GiftCertificateView" actionBarVisible="false" xmlns:local="*">
    <s:Image source="@Embed('Grand Prismatic Spring.jpg')" width="100%" height="100%" />
    <local:DrawingImg width="100%" height="100%"/>
</s:View>
...