Как нарисовать круг в файле Flex MXML?

Question

В моем файле MXML у меня есть навигатор вкладок с тремя vboxes.

<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> 

Внутри VBox «Текущая цитата», я хочу, чтобы круг был нарисован. Как я могу это достичь?

Answer 1

Там нет MXML круг определен, так что вы должны создать круг контролируйте себя, и затем вы можете включить его в свой 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); 
     } 
    } 
} 

то в вашем MXML вы можете использовать пользовательский элемент управления, если вы объявляете пространство имен для обозначения к ней в верхней части, содержащей контроль ...

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

Код выше был напечатан в StackOverflow редактор, поэтому проверьте, работает ли он!

В Интернете есть много возможностей для расширения UIComponent и Sprite. Документы Adobe довольно обширны.

EDIT: Включить элементы управления в пространстве имен в ограждающих управления или применения

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

НТН

Answer 2

Посмотрите на Degrafa.

Answer 3

Так в Flex это возможность:

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

Это должно работать :)

Answer 4

Украшая для перетаскивания и т.д ...

Да, в значительной степени ничего возможное. Если вы не хотите использовать круговую диаграмму (которую я рекомендую вам посмотреть, потому что это может сделать очень простой код чертежа очень простым), вам нужно приукрасить класс MyCircle выше, чтобы уловить событие mouseDown и включить перетаскивание из он использует объект 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 
     } 
    } 
} 

Вы должны установить эти функции (и в зависимости от того еще вы завершаете поддержку для перетаскивания/вывода) в качестве слушателей событий на этом объекте. Вы можете сделать это в конструкторе объекта, вам просто нужно убедиться, что вы слушаете правильное событие.

У вас есть кое-что, и adobe docs are your friend, но все это вполне возможно. По мере того, как вы добавляете больше в MyCircle, вы получите большую выгоду от его включения в отдельный элемент управления.

Answer 5

Там может быть еще один вариант, чтобы создать круг, затмить

Создание Box с цветом фона (если вы хотите, чтобы заполнить его любым цветом) и с определенной шириной и высотой и обеспечивают радиус угла ровно половину ширина

пример:

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

Answer 6

Попробуйте следующий код:

 <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>