Comment dessiner un cercle dans un fichier Flex MXML ?

Question

Dans mon fichier MXML, j'ai un navigateur d'onglets avec trois vboxes.

À l'intérieur de la VBox "Citation actuelle", je veux qu'un cercle soit dessiné. Comment puis-je y parvenir ?

Answer 1

Il n'y a pas de cercle MXML défini, vous devez donc créer vous-même un contrôle de cercle que vous pourrez ensuite inclure dans votre MXML.

package mypackage
{
    class MyCircle extends UIComponent
    {
        public var x:int;
        public var y:int;
        public var radius:int;

        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
        {
            graphics.drawCircle(x, y, radius);
        }
    }
}

ensuite dans votre MXML, vous pouvez utiliser votre contrôle personnalisé si vous déclarez un espace de noms pour y faire référence en haut de votre contrôle conteneur...

Le code ci-dessus a été saisi dans l'éditeur StackOverflow, donc vérifiez qu'il fonctionne!

Il existe beaucoup d'aide sur le web pour étendre UIComponent et Sprite. La documentation d'Adobe est assez complète.

MODIFICATION: Incluez vos contrôles en tant qu'espace de noms dans le contrôle ou l'application contenant

J'espère que cela vous aide

Answer 2

Il peut y avoir une autre option pour créer un cercle, une ellipse

Créez une boîte avec une couleur de fond (si vous voulez la remplir avec une couleur quelconque) et avec une largeur et une hauteur spécifiques et fournissez un rayon de coin avec exactement la moitié de la largeur

exemple :

Answer 3

Donc en Flex, c'est une possibilité :

var mySprite:Sprite = new Sprite();
mySprite.graphics.beginFill(0xFFCC00);
mySprite.graphics.drawCircle(30, 30, 30);
this.addChild(mySprite);

Cela devrait fonctionner :)

Answer 4

Embellir pour le glisser-déposer, etc...

Oui, à peu près tout est possible. Si vous ne voulez pas utiliser un diagramme circulaire (que je vous recommande de regarder car cela pourrait rendre une grande partie du code de dessin très simple), alors vous devez embellir la classe MyCircle ci-dessus pour capturer l'événement mouseDown et activer le glisser-déposer à partir de celui-ci en utilisant un objet DragSource.

package mypackage
{
    class MyCircle extends UIComponent
    {
        ...snip...

        // pour initier un glisser-déposer à partir de cet objet
        private function MouseDown(e:MouseEvent):void
        {
            var ds:DragSource = new DragSource();
            if (data)
            {
                // J'ajoute les données de l'objet à celle-ci, mais vous devez décider de ce que vous voulez mettre ici
                ds.addData(data, "MyDragAction");
                mx.managers.DragManager.doDrag(this, ds, e);
            }
        }

        // pour gérer un dépôt
        private function HandleDrop(e:DragEvent):void
        {
            mx.managers.DragManager.acceptDragDrop(e.currentTarget);
            // vous pouvez accéder à tout ce que vous avez mis dans l'événement de glisser et déposer ici
        }
    }
}

Vous devrez définir ces fonctions (et d'autres que vous finirez par supporter pour le glisser-déposer) en tant qu'écouteurs d'événements sur cet objet. Vous pouvez le faire dans le constructeur de l'objet, il vous suffit de vous assurer que vous écoutez le bon événement.

Vous avez un peu de travail de recherche à faire, et les documents d'Adobe sont votre ami, mais tout cela est parfaitement possible. Plus vous ajouterez de fonctionnalités à MyCircle, plus vous bénéficierez de l'avoir extrait dans un contrôle séparé.

Answer 5

Essayez le code suivant :