Flex:需要帮助实现虚线的自定义组件代码

时间:2012-01-17 20:08:41

标签: flex actionscript

我是Flex的新手,我一直在努力弄清楚如何使用以下代码在Flex 4中创建虚线。

http://riarange.wordpress.com/2010/10/29/how-to-create-a-dotted-line-or-dashed-line-in-flex-4/

我希望能够更好地了解Flex的人可以简单地提供一个使用此代码绘制虚线的完整(最小)示例。我把这些碎片放在一起很麻烦,我认为作者假设了一些我缺乏的基本知识。如果我有一个工作的例子,我可以弄清楚如何使其适应我的需要。

提前感谢您的任何意见/帮助。如果有更好的虚线代码,很想知道。

更新:

我将自定义组件代码放入com目录中的DottedLine.mxml文件中。现在,我收到的错误出现在<components:Group>行,上面写着:Could not resolve <components:Group> to a component implementation.

<mx:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx"
    xmlns:components="com.*"
    minWidth="955" minHeight="600" xmlns:com="com.*">

<fx:Script><![CDATA[
    import mx.collections.ArrayCollection;
    [Bindable]
    public var expenses:ArrayCollection = new ArrayCollection([
    {Month:1, Profit:2000, Expenses:1500, Amount:450},
    {Month:2, Profit:1000, Expenses:200, Amount:600},
    {Month:2.05, Profit:1000, Expenses:500, Amount:300},
    {Month:2.1, Profit:1000, Expenses:500, Amount:450},
    {Month:2.15, Profit:1000, Expenses:200, Amount:600},
    {Month:2.2, Profit:1000, Expenses:500, Amount:300},
    {Month:2.25, Profit:1000, Expenses:500, Amount:450},
    {Month:2.3, Profit:1000, Expenses:200, Amount:600},
    {Month:2.35, Profit:1000, Expenses:500, Amount:300},
    {Month:2.4, Profit:1000, Expenses:500, Amount:450},
    {Month:2.45, Profit:1000, Expenses:200, Amount:600},
    {Month:2.5, Profit:1000, Expenses:500, Amount:300},
    {Month:2.55, Profit:1000, Expenses:500, Amount:450},
    {Month:2.6, Profit:1000, Expenses:200, Amount:600},
    {Month:2.65, Profit:1000, Expenses:500, Amount:300},
    {Month:2.7, Profit:1000, Expenses:500, Amount:450},
    {Month:2.75, Profit:1000, Expenses:200, Amount:600},
    {Month:2.8, Profit:1000, Expenses:500, Amount:300},
    {Month:2.85, Profit:1000, Expenses:500, Amount:450},
    {Month:2.9, Profit:1000, Expenses:200, Amount:600},
    {Month:6, Profit:1500, Expenses:500, Amount:300}
    ]);

]]></fx:Script>

<mx:Panel title="Line Chart With Strokes">

    <mx:LineChart id="myChart" dataProvider="{expenses}" showDataTips="true" seriesFilters="{new Array}">
        <mx:horizontalAxis>
            <mx:LinearAxis />
        </mx:horizontalAxis>
        <mx:series>
            <mx:LineSeries xField="Month" yField="Expenses" displayName="Expenses">
                <mx:lineStroke>
                    <mx:SolidColorStroke id="s1" color="0xBD171B" weight="4"/>
                </mx:lineStroke>
            </mx:LineSeries>
            <mx:LineSeries xField="Month" yField="Amount" displayName="Amount">
                <components:Group>
                    <components:DottedLine width="500" height="2" dotColor="0xFFFFFF" dotWidth="3" dotAlpha="1" />      
                </components:Group>
            </mx:LineSeries>
        </mx:series>
    </mx:LineChart>
    <mx:Legend dataProvider="{myChart}" direction="horizontal"/>
</mx:Panel>

1 个答案:

答案 0 :(得分:1)

我在Flex 3中做过这些,但是相信他们也应该在Flex 4中工作,还有其他的例子比我拥有的和你发布的更好但是它真的取决于你将如何申请虚线。如果这没有帮助让我知道,我会试着澄清: http://www.shaunhusain.com/TestDashedLines/index.html

http://www.shaunhusain.com/TestDashedLines/index2.html

http://www.shaunhusain.com/TestDashedLines/srcview/

我在这里得到的是一个项目中的两个应用程序,第一页是使用SimpleDashedLine类的输出,该类用于基本绘制HRule但使用破折号。第二个是在其他对象图形上绘制任意直线。