Flex: Создать собственный штрих на LineSeries? - PullRequest
Новая
       18

Flex: Создать собственный штрих на LineSeries?

1 голос
/ 16 января 2010

Вы можете легко установить обводку для ряда линий следующим образом: 

<mx:LineSeries yField="apple">
    <mx:lineStroke>
        <mx:Stroke 
                    color="0x6699FF" 
                    weight="4" 
                    alpha=".8"
        />
    </mx:lineStroke>
</mx:LineSeries>

Это установит альфа для всего хода на .8

Но я хочу иметь возможность устанавливать разные значения альфа на сток для каждого графика на основе чего-либо в dataProvider.

Например, yField в lineSeries - это «Apple», который знает, как построить график для lineSeries. Я хочу иметь возможность добавить что-то вроде alphaField, которое говорит, что нужно установить альфа обводки для каждого графика.

так что если мой dataProvider был: 

<result month="Jan-04">
    <apple>81768</apple>
    <alpha>1</alpha>
</result>
<result month="Feb-04">
    <apple>51156</apple>
    <alpha>1</alpha>
</result>
<result month="Mar-04">
    <apple>51156</apple>
    <alpha>.5</alpha>
</result>

И я установил alphaField="alpha", тогда у меня был бы сплошной штрих от графика 0 до графика 1, а затем 50% альфа-хода от графика 1 до графика 2.

Как я могу это сделать ??? Я смотрю в методах commitProperties () и updateDisplayList () LineSeries и не знаю, что нужно добавить / изменить, чтобы сделать это?

Я почти уверен, что этот класс должен использовать Graphics.lineTo () для рисования каждого графика, поэтому в основном ему необходимо каким-то образом «получить» текущее значение alphaField и применить Graphics.lineStyle () с правильной альфа перед рисованием каждой линии.

Спасибо !!

UPDATE

Я стал намного ближе к своему ответу.

Когда я расширяю LineRenderer, я перезаписываю updateDisplayList (), который вызывает GraphicsUtilities.drawPolyLine ()

Я расширяю GraphicsUtilities и переопределяю метод drawPolyLine (), так как именно здесь на самом деле рисуется линия.

Я могу вызвать здесь lineStyle () и изменить альфа строки ...

У меня все еще есть одна вещь, которую я не могу понять, из метода drawPolyLine (), как я могу получить доступ к тем данным, которые определяют, какой должна быть альфа?

Спасибо !!!!

Ответы [ 3 ]

0 голосов
/ 19 января 2010

Вы пробовали использовать средство визуализации пользовательских элементов? 

<mx:LineSeries>
  <mx:itemRenderer>
    <mx:Component>
      <mx:BoxItemRenderer scaleX="1" scaleY="1" alpha="{data.alpha}"/>
    </mx:Component>
  </mx:itemRenderer>
</mx:LineSeries>

Это только быстрый пример, но я думаю, что itemRenderer - это то, что нужно.

0 голосов
/ 21 января 2010

В функции drawPolyLine вы получите pts:Array. Это массив конкретного SeriesItem. Для серии Line вы получите массив LineSeriesItem объектов. Так что, если вы хотите получить значения по осям x & y. вы просто получаете доступ к xValue или yValue свойству LineSeriesItem. как это: pts[0].xValue или pts[0].yValue

public static function drawPolyLine(g:Graphics, pts:Array,
                                     start:int, end:int,
                                     hProp:String, vProp:String,
                                     stroke:IStroke, form:Object,
                                     moveToStart:Boolean = true):void
0 голосов
/ 19 января 2010

Я использовал Flex SDK 4.0, но я верю, что он будет работать и на 3.4.

Использовал ArrayCollection вместо XML, потому что это не был цимус. 

<mx:Application
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/halo" >

    <fx:Script><![CDATA[
        import mx.charts.ChartItem;
        import mx.charts.renderers.CircleItemRenderer;
        import mx.collections.ArrayCollection;
        import mx.graphics.IFill;
        import mx.graphics.SolidColor;
        import mx.graphics.Stroke;

        import st.model.ViewModelLocator;

        [Bindable]
        private var modelLocator:st.model.ViewModelLocator = ViewModelLocator.getInstance() ;

        [Bindable]
        public var dp :ArrayCollection = new ArrayCollection([
            { test:0.1,alpha: 1 },
            { test:0.2,alpha: 0.5 },
            { test:0.3,alpha: 0.75 },
            { test:0.4,alpha: 0.25 },
            { test:0.5,alpha: 0.5 }
        ]);

        private function myFillFunction(element:ChartItem, index:Number):IFill {
            return new SolidColor(0x6699FF,Number(element.item.alpha));
        }
    ]]></fx:Script>

    <mx:ColumnChart id="myChart" dataProvider="{dp}">
        <mx:series>
            <mx:LineSeries lineStroke="{new Stroke(0x6699FF,4,0.1)}" width="100" height="100" yField="test" fillFunction="{myFillFunction}" itemRenderer="{new ClassFactory(mx.charts.renderers.CircleItemRenderer)}" />
        </mx:series>
    </mx:ColumnChart>

</mx:Application>
...