[Flex] Canvas: over bitmap tekenen lukt niet.

[sebastius]

Ik probeer (het is mijn eerste serieuze Flash/Flex project en voornamelijk gepikt van examples) het volgende: Ik maak een screenshot van een webcam (werkt), dat plaats ik op een canvas (werkt dmv addchild) en daar wil ik op tekenen met de muis. Maar dat werkt niet. Gek genoeg doet het tekengedeelte het prima stand-alone maar niet in mijn brok code.

Ik begin met een webcam te streamen naar een raampje 'myVid. Ik heb een canvas genaamd 'werkplek' gemaakt met mousedown, mousemove en mouseup verwijzingen. (vergeef me het engels/NL door elkaar, ik moet de code echt nog gaan poetsen wat dat betreft)

Dan heb ik het volgende om het plaatje van de webcam op de canvas te mikken (stilstaand beeld)

code:

public function snapshot():void {
    var bmd:BitmapData = new BitmapData(1024, 768);
    bmd.draw(myVid);
    var myBitmap:Bitmap = new Bitmap(bmd);
    var myImage:Image = new Image();
    myImage.source = myBitmap;
    werkplek.addChild(myImage);

Dit stuk werkt prima maar kan mogelijk beter?

Dan krijg je het tekengedeelte en dat zit ongeveer zo in elkaar:

code:

    private function doMouseMove():void
        {
            x2 = werkplek.mouseX;
            y2 = werkplek.mouseY;
            if (isDrawing)
            {
                werkplek.graphics.lineStyle(2, drawColor);
                werkplek.graphics.moveTo(x1, y1);
                werkplek.graphics.lineTo(x2, y2);
                x1 = x2;
                y1 = y2;
            }
        }

Natuurlijk mis je nu een stukje detectie voor de boolean 'isDrawing', die zit gekoppeld aan doMouseDown()

Echt alles werkt prima in m'n code behalve het tekenen. Ik krijg niks op m'n plaatje getekend. Moet ik soms nog een child toevoegen voor de tekenlaag? Ik heb gezocht op terminologie als 'draw on bitmap image' maar ik kom helaas niet veel verder dan wat ik tot nu toe heb.

[R4gnax]

De graphics context van een element wordt getekend onder de child elements. Alles wat je tekent in werkplek.graphics ligt dus onder myImage verborgen.

[sebastius]

Oh dat is een beetje stom zeg Is er een manier om dat om te wisselen?

Update

Een extra child toegevoegd

code:

    werkplek.addChild(new UIComponent);
    werkplek.addChild(myImage);

In deze volgorde maar ook andersom zie ik nu ONDER m'n bitmap wat getekend worden. Hoe kan ik die laagjes omwisselen (en hoe weet ik zeker dat ik in de goede laag zit te tekenen)?

[ Voor 68% gewijzigd door sebastius op 07-05-2012 14:03 ]

[Tsjilp]

euh... eerst je image toevoegen en dan je graphics uicomponent?
addChild werkt van beneden naar boven.
Anders kun je addChildAt(mc, index) gebruiken.

edit:

Je moet natuurlijk wel in de ui component tekenen, niet in de parent,
dus
[code]
var gr:UIComponent = new UIComponent();
addChild(image);
addChild(gr);

gr.graphics.tekenmaareeneindweg();
[/code]

[ Voor 42% gewijzigd door Tsjilp op 08-05-2012 12:54 ]

[sebastius]

Oh wow! Gaan we testen, onwijs bedankt voor deze wijsheid, vermoedde al dat ik zoiets mistte maar kwam echt niet er uit...

Update: Echt superbedankt! Hij doet het! Oh men! Damn, dit is echt fijn!

[ Voor 23% gewijzigd door sebastius op 08-05-2012 21:02 ]