Comment dessiner un cercle dans un fichier Flex MXML?

Question

Dans mon fichier MXML, j'ai un onglet de navigation avec trois vbox.

<mx:TabNavigator width="624" height="100%"> 
     <mx:VBox label="Currents Quote" 
      width="100%">    
     </mx:VBox> 
     <mx:VBox label="Quote Comparison" 
      width="100%">    
     </mx:VBox> 
     <mx:VBox label="Reports" 
      width="100%">    
     </mx:VBox>  
</mx:TabNavigator> 

À l'intérieur de la VBox "Current Quote", je souhaite dessiner un cercle. Comment puis-je y arriver?

Answer 1

Il n'y a pas cercle MXML défini, vous devez créer un cercle contrôlez-vous et vous pouvez ensuite l'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); 
     } 
    } 
} 

alors dans votre MXML vous pouvez utiliser votre contrôle personnalisé si vous déclarez un espace de noms pour s'y référer en haut de votre commande contenant ...

<mx:VBox label="Currents Quote" width="100%"> 
    <mycontrols:MyCircle x="30" y="30" radius="30"/> 
</mx:VBox> 

code ci-dessus a été tapé dans le StackOverflow éditeur, alors vérifiez ça fonctionne!

Il y a beaucoup d'aide sur le Web pour étendre UIComponent et Sprite. Les documents Adobe sont assez complets.

EDIT: Inclure vos contrôles comme un espace de noms dans le contrôle entourant l'application ou

<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:mycontrols="mypackage.*" > 
<mx:Script> 

HTH

Answer 2

Jetez un oeil à Degrafa.

Answer 3

Ainsi, dans 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 glisser-déposer, etc ...

Oui, à peu près tout est possible. Si vous ne voulez pas utiliser un camembert (que je vous recommande de regarder car il peut rendre beaucoup de code de dessin très simple), vous devez embellir la classe MyCircle ci-dessus pour intercepter l'événement mouseDown et activer le déplacement depuis en utilisant un objet DragSource.

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

     // to initiate a drag from this object 
     private function MouseDown(e:MouseEvent):void 
     { 
      var ds:DragSource = new DragSource(); 
      if (data) 
      { 
       // I'm adding the object's data to it, but you need to decide what you want in here 
       ds.addData(data, "MyDragAction"); 
       mx.managers.DragManager.doDrag(this, ds, e); 
      } 
     } 

     // to handle a drop 
     private function HandleDrop(e:DragEvent):void 
     { 
      mx.managers.DragManager.acceptDragDrop(e.currentTarget); 
      // you can get at whatever you put in the drag event here 
     } 
    } 
} 

Vous devez définir ces fonctions (et quel que soit ce que vous liquidez le soutien pour le glisser/déposer) en tant qu'auditeurs d'événement sur cet objet. Vous pouvez le faire dans le constructeur de l'objet, vous devez juste vous assurer que vous écoutez le bon événement.

Vous avez un peu de creuser à faire, et le adobe docs are your friend, mais tout est parfaitement possible. Au fur et à mesure que vous ajoutez d'autres éléments à MyCircle, vous aurez plus d'avantages à les inclure dans un contrôle séparé.

Answer 5

Il peut y avoir une option supplémentaire pour créer un cercle, éclipser

Créer une boîte avec des couleurs d'arrière-plan (si vous voulez le remplir avec une couleur) et avec une largeur et une hauteur spécifiques et de fournir un rayon d'angle avec exactement la moitié des largeur

exemple:

<mx:Box cornerRadius="3" borderStyle="solid" borderColor="0x5F4C0B" backgroundColor="0x5F4C0B" width="6" height="6" /> 

Answer 6

Essayer le code suivant:

 <s:Ellipse x="60" y="60" width="80" height="80"> 
      <s:stroke>     
       <s:LinearGradientStroke rotation="90"> 
        <s:entries> 
         <s:GradientEntry color="white" ratio="0.5"/> 
         <s:GradientEntry color="black" ratio="0.5" /> 
        </s:entries> 
       </s:LinearGradientStroke> 
      </s:stroke> 
     </s:Ellipse>