如何在 Flex MXML 文件中绘制圆？

Question

在我的 MXML 文件中，我有一个带有三个 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>

在 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 编辑器中，因此请检查它是否有效！

Web 上有很多关于扩展 UIComponent 和 Sprite 的帮助。 Adobe 文档非常全面。

编辑：
将您的控件作为命名空间包含在封闭控件或应用程序

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

HTH中

Answer 2

还可以有一个选项来创建一个圆，Eclipse

Create Box 具有背景颜色（如果您想用任何颜色填充它）和特定的宽度和高度，并提供恰好一半宽度的角半径

示例：

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

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 文档是你的朋友，但这一切都是完全可能的。当您向 MyCircle 添加更多内容时，您将通过将其分解为单独的控件而获得更大的好处。

Answer 5

尝试以下代码：

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

Answer 6

看看Degrafa。