如何在Flex MXML文件中绘制圆圈?
问题描述:
在我的MXML文件中,我有一个带三个vbox的标签导航器。如何在Flex MXML文件中绘制圆圈?
<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的“当前引用”中,我想绘制一个圆。我怎样才能实现它?
答
有没有定义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>
以上代码中键入到的*编辑器,所以检查它的作品!
Web上有很多关于扩展UIComponent和Sprite的帮助。 Adobe文档非常全面。
编辑: 包括您的控件在封闭控制或应用程序命名空间
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:mycontrols="mypackage.*" >
<mx:Script>
HTH
答
所以Flex中,这是一个可能性:
var mySprite:Sprite = new Sprite();
mySprite.graphics.beginFill(0xFFCC00);
mySprite.graphics.drawCircle(30, 30, 30);
this.addChild(mySprite);
这应该工作:)
答
美化拖放等..
是,相当多的东西是可能。如果你不想使用饼图(我建议你看看,因为它可能会使很多图形代码变得非常简单),那么你需要修饰上面的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添加更多内容,您将从将它分解为单独的控件中获益更多。
答
可以有一个选择,以创建一个圆,日食
与背景色创建对话框(如果你想与任何颜色填充它),并与特定的宽度和高度,并提供圆角半径与正好一半宽度
例如:
<mx:Box cornerRadius="3" borderStyle="solid" borderColor="0x5F4C0B" backgroundColor="0x5F4C0B" width="6" height="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>
是否将Circle控件创建为.as文件? – Angeline 2009-12-29 09:04:27
是的,作为一个单独的类在它自己的文件 – Simon 2009-12-29 09:08:05
如果我创建一个.as文件,它不被包含作为一个名称空间的组件? – Angeline 2009-12-29 10:50:55