Question

我一直在使用flex图表组件，我想在图例中为标记嵌入自定义图标。我遇到了一些奇怪的行为，如果直接设置图标被镜像并且文本未对齐但是如果使用类工厂和legendMarkerRenderer属性创建，则组件呈现正常。我已经包含一个片段来说明下面的问题。

解决这个问题可能是可能的，但我很好奇是否有人解释这里可能会发生什么。

其他信息：Flex SDK 4.5.0.20967，FlashBuilder 4.5

这是以下代码段的输出：

Application Snippet

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark">
    <fx:Script>
    <![CDATA[
        import mx.charts.LegendItem;

        [Embed(source="/resources/GraphResetIcon.png")]
        public static var icon:Class;
    ]]>
    </fx:Script>
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>

    <!-- This works fine -->
    <mx:LegendItem legendMarkerRenderer="{new ClassFactory(icon)}" markerAspectRatio="1" 
        labelPlacement="right" label="Texty texty" markerHeight="11" markerWidth="11" />

    <!-- This does not work -->
    <mx:LegendItem marker="{new icon()}" markerAspectRatio="1" labelPlacement="right"     
        label="Texty texty" markerHeight="11" markerWidth="11" />

</s:Application>

Answer 1

尝试

<mx:LegendItem marker="{icon}" markerAspectRatio="1" labelPlacement="right"              label="Texty texty" markerHeight="11" markerWidth="11" />

编辑：

我挖出了备用硬盘，这对我有用

//button icons          
[Embed(source='com/magnoliamultimedia/assets/guess.png')]
private var guessIcon:Class;
[Embed(source='com/magnoliamultimedia/assets/half_guess.png')]
private var halfGuessIcon:Class;
[Embed(source='com/magnoliamultimedia/assets/not_guess.png')]
//bitmapasset for markers
[Bindable]
private var _guessBA:BitmapAsset;
[Bindable]
private var _halfGuessBA:BitmapAsset;
[Bindable]
private var _notGuessBA:BitmapAsset;

///...
private function init():void{
    _guessBA = BitmapAsset(new guessIcon());
    _halfGuessBA = BitmapAsset(new halfGuessIcon());
    _notGuessBA= BitmapAsset(new notGuessIcon());
    _markerHeight = _guessBA.height*.75;
    _markerWidth = _guessBA.width*.75;
    legend.visible = true;
}
//...
<mx:Canvas id="legend" width="{Application.application.width}" height="75" 
    backgroundColor="#FFFFFF" visible="false">
    <mx:constraintColumns>
        <mx:ConstraintColumn id="rowName" width="20%" />
        <mx:ConstraintColumn id="legend1" width="25%" />
        <mx:ConstraintColumn id="legend2" width="25%" />
        <mx:ConstraintColumn id="legend3" width="25%" />
    </mx:constraintColumns>
    <mx:constraintRows>
        <mx:ConstraintRow id="colors" />
        <mx:ConstraintRow id="icons" />
    </mx:constraintRows>
    <!--color legends-->
    <mx:LegendItem label="Colors:" id="colorCol1" visible="false"
            top="colors:10" left="rowName:10" right="legend1:10" fill="{noFill}"
            markerHeight="0" markerWidth="0" />
    <mx:LegendItem label="Correct" id="colorCol2" visible="false"
            top="colors:10" left="legend1:10" right="legend2:10" 
            fill="{greenFill}" stroke="{outline}" 
            markerHeight="{_markerHeight}" markerWidth="{_markerWidth}" />
    <mx:LegendItem label="Wrong" id="colorCol3" visible="false"
            top="colors:10" left="legend2:10" right="legend3:10" 
            fill="{redFill}" stroke="{outline}" 
            markerHeight="{_markerHeight}" markerWidth="{_markerWidth}" />
    <mx:LegendItem label="Not Attempted" id="colorCol4" visible="false"
            top="colors:10" left="legend3:10" 
            fill="{defaultFill}" stroke="{outline}" 
            markerHeight="{_markerHeight}" markerWidth="{_markerWidth}" />
    <mx:HRule id="separator" top="icons:5" left="10" right="10" visible="false" />
        <!--icon legends-->
        <mx:LegendItem label="Icons:" 
            top="icons:10" left="rowName:10" right="legend1" fill="{noFill}" 
            markerHeight="0" markerWidth="0" />
        <mx:LegendItem label="Guess" 
            top="icons:10" left="legend1:10" right="legend2:10" 
            marker="{_guessBA}" markerAspectRatio="1" 
            markerHeight="{_markerHeight}" markerWidth="{_markerWidth}" />
        <mx:LegendItem label="Half Guess" 
            top="icons:10" left="legend2:10" right="legend3:10" 
            marker="{_halfGuessBA}" markerAspectRatio="1" 
            markerHeight="{_markerHeight}" markerWidth="{_markerWidth}" />
        <mx:LegendItem label="Not A Guess" 
            top="icons:10" left="legend3:10" 
            marker="{_notGuessBA}" markerAspectRatio="1" 
            markerHeight="{_markerHeight}" markerWidth="{_markerWidth}" />
</mx:Canvas>
<!--legend colors-->
<mx:SolidColor id="redFill" color="0x990000" />
<mx:SolidColor id="greenFill" color="0x003300" />
<mx:SolidColor id="defaultFill" color="0xE6EEEE" />
<mx:SolidColor id="noFill" color="0xE6EEEE" alpha="0" />
<mx:Stroke id="outline" color="0" weight="1" />

原则上，这几乎与您开始时的相同，但我明确地将新创建的Class实例强制转换为BitmapAsset。

弹性图表中LegendItem的自定义嵌入式标记

1 个答案: