Apache flex flex图表中LegendItem的自定义嵌入标记

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

解决这个问题也许是可能的，但我很好奇是否有人能解释一下这里到底发生了什么

其他信息：Flex SDK 4.5.0.20967，FlashBuilder 4.5

这是以下代码段的输出：

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

试试看

编辑：

我挖出了我的备份硬盘，这是适合我的

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

//按钮图标
[嵌入（source='com/magnoliamultimedia/assets/guess.png'）]
私有图标：类；
[嵌入（source='com/magnoliamultimedia/assets/half_guess.png'）]
私有图标：类；
[嵌入（source='com/magnoliamultimedia/assets/not_guess.png'）]
//标记的位图资源
[可装订]
私有变量：BitmapAsset；
[可装订]
私有变量：位图资产；
[可装订]
私有变量：BitmapAsset；
///...
私有函数init（）：void{
_guessBA=BitmapAsset（新的guessIcon（））；
_halfGuessBA=位图资源（新的halfGuessIcon（））；
_notGuessBA=BitmapAsset（新的notGuessIcon（））；
_markerHeight=高度*.75；
_markerWidth=_guessBA.宽度*.75；
legend.visible=true；
}
//...

原则上，这与您开始使用的几乎相同，但我显式地将新创建的类实例强制转换为BitmapAsset。

试试看

编辑：

我挖出了我的备份硬盘，这是适合我的

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

//按钮图标
[嵌入（source='com/magnoliamultimedia/assets/guess.png'）]
私有图标：类；
[嵌入（source='com/magnoliamultimedia/assets/half_guess.png'）]
私有图标：类；
[嵌入（source='com/magnoliamultimedia/assets/not_guess.png'）]
//标记的位图资源
[可装订]
私有变量：BitmapAsset；
[可装订]
私有变量：位图资产；
[可装订]
私有变量：BitmapAsset；
///...
私有函数init（）：void{
_guessBA=BitmapAsset（新的guessIcon（））；
_halfGuessBA=位图资源（新的halfGuessIcon（））；
_notGuessBA=BitmapAsset（新的notGuessIcon（））；
_markerHeight=高度*.75；
_markerWidth=_guessBA.宽度*.75；
legend.visible=true；
}
//...

---

原则上，这与您开始使用的几乎相同，但我显式地将新创建的类实例强制转换为BitmapAsset。

您不能将类或类工厂绑定到实例（标记），而只能绑定样式（legendMarkerRenderer）。我很确定这是FlexSDK中的一个bug，我主要是想知道是否有人知道这个bug在哪里。我对示例的措辞是这样的，因为如果您深入研究图例的代码，第二种方法是mxml，相当于图例类创建LegendItem的方式。谢谢：）将嵌入的资源转换为BitmapAsset解决了这个问题。非常感谢！不能仅将类或类工厂绑定到样式（legendMarkerRenderer）的实例（标记）。我很确定这是FlexSDK中的一个bug，我主要是想知道是否有人知道这个bug在哪里。我对示例的措辞是这样的，因为如果您深入研究图例的代码，第二种方法是mxml，相当于图例类创建LegendItem的方式。谢谢：）将嵌入的资源转换为BitmapAsset解决了这个问题。非常感谢！虽然我仍然不知道为什么将图像直接嵌入标记不起作用，但我找到了一个变通方法，将嵌入的图像包装在图像中并将图像设置为标记将使布局功能正确。虽然我仍然不知道为什么将图像直接嵌入标记不起作用，但我找到了一个变通方法，即包装嵌入图像并将图像设置为标记将使布局功能正确。