0

我已经扩展IconItemRenderer为创建我正在处理的项目所需的自定义项目渲染器。渲染器现在工作正常，除了我不知道如何在iconand之外添加更多图像decorator。我需要添加三个额外的图像，但无法弄清楚如何。

我一直在尝试的（渲染器完全用 AS3 编写）：

override protected function createChildren():void {
    super.createChildren();
    this.downloadIcon = new BitmapImage();
    this.downloadIcon.source = "assets/images/download-160.png";
    var down:DisplayObject = this.downloadIcon.createDisplayObject();
    this.addChild( down );
}

据我所知，这应该可行。如果我将该源加载为 iconDisplay 源，它加载得很好，所以它不是源。我使用什么来源（甚至本地与外部）也无关紧要。我也尝试使用 IconItemRenderer 源代码无济于事：

private function assignDisplayObject(bitmapImage:BitmapImage):void
{
    if (bitmapImage)
    {
        // try using this display object first
        if (bitmapImage.setSharedDisplayObject(this))
        {
            bitmapImage.displayObjectSharingMode = DisplayObjectSharingMode.USES_SHARED_OBJECT;
        }
        else
        {
            // if we can't use this as the display object, then let's see if 
            // the icon already has and owns a display object
            var ownsDisplayObject:Boolean = (bitmapImage.displayObjectSharingMode != DisplayObjectSharingMode.USES_SHARED_OBJECT);

            // If the element doesn't have a DisplayObject or it doesn't own
            // the DisplayObject it currently has, then create a new one
            var displayObject:DisplayObject = bitmapImage.displayObject;
            if (!ownsDisplayObject || !displayObject)
                displayObject = bitmapImage.createDisplayObject();

            // Add the display object as a child
            // Check displayObject for null, some graphic elements
            // may choose not to create a DisplayObject during this pass.
            if (displayObject)
                addChild(displayObject);

            bitmapImage.displayObjectSharingMode = DisplayObjectSharingMode.OWNS_UNSHARED_OBJECT;
        }
    }        
}

使用任何一种方法都不会显示任何内容。有人可以解释我做错了什么吗？

如果有帮助的话，请使用 Flex 4.10 和 AIR 3.8。

编辑：根据 Reboog 的要求，这里是完整的项目渲染器减去导入

public class VideoItemRenderer extends IconItemRenderer
{
private static const OUTER_PADDING:uint = 15;
private static const INNER_PADDING:uint = 10;

private var description:StyleableTextField;
private var progressBar:ProgressBar;
private var downloadContainer:Group;
private var deleteIcon:VideoDeleteIcon;
private var downloadIcon:Image;

public function VideoItemRenderer()
{
    super();

    this.addEventListener( FlexEvent.DATA_CHANGE, this.dataChangeHandler );
    this.minHeight = 106;
    this.iconFunction = this.iconSelectFunction;
    this.iconHeight = 76;
    this.iconWidth = 107;
}

private function iconSelectFunction( item:Object ):Object {
    return "assets/images/background-160.png";
}

override protected function createChildren():void {
    super.createChildren();

    this.labelDisplay.wordWrap = true;
    this.labelDisplay.multiline = true;

    this.description = StyleableTextField(createInFontContext(StyleableTextField));
    this.description.styleName = this;
    this.description.editable = false;
    this.description.selectable = false;
    this.description.multiline = true;
    this.description.wordWrap = true;
    this.description.setStyle( "fontFamily", "josefin" );
    this.description.setStyle( "fontWeight", "bold" );
    this.description.text = "Vestibulum id ligula porta felis euismod semper. Cras mattis consectetur purus sit amet.";
    this.addChild( this.description );

    this.deleteIcon = new VideoDeleteIcon();
    this.deleteIcon.addEventListener( MouseEvent.CLICK, this.deleteClickHandler );
    this.addChild( this.deleteIcon );

    this.downloadContainer = new Group();
    this.addChild( this.downloadContainer );

    this.progressBar = new ProgressBar();
    this.downloadContainer.addChild( this.progressBar );

    this.downloadIcon = new Image();
    this.downloadIcon.source = "assets/images/download-160.png";
    this.downloadContainer.addChild( downloadIcon );
}

override protected function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void {
    unscaledWidth = Math.min( this.owner.width, unscaledWidth );

    graphics.beginFill( 0xffffff, .1 );
    graphics.drawRect( 0, 0, unscaledWidth, unscaledHeight );
    graphics.endFill();
    opaqueBackground = null;
}

override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void {
    unscaledWidth = Math.min( this.owner.width, unscaledWidth );
    super.layoutContents( unscaledWidth, unscaledHeight );

    if ( this.iconDisplay ) {
        this.setElementSize( this.iconDisplay, 107, 76 );
        this.setElementPosition( this.iconDisplay, OUTER_PADDING, OUTER_PADDING );

        this.setElementPosition( this.labelDisplay, this.iconDisplay.x + this.getElementPreferredWidth( this.iconDisplay ) + INNER_PADDING, OUTER_PADDING );
        this.setElementPosition( this.description, this.iconDisplay.x + this.getElementPreferredWidth( this.iconDisplay ) + INNER_PADDING, this.labelDisplay.y + this.getElementPreferredHeight( this.labelDisplay ) + INNER_PADDING );
    }
    else {
        this.setElementPosition( this.labelDisplay, OUTER_PADDING, OUTER_PADDING );
        this.setElementPosition( this.description, OUTER_PADDING, this.labelDisplay.y + this.getElementPreferredHeight( this.labelDisplay ) + INNER_PADDING );
    }
    this.setElementSize( this.labelDisplay, unscaledWidth - this.labelDisplay.x - OUTER_PADDING, this.getElementPreferredHeight( this.labelDisplay ) );
    this.setElementSize( this.description, unscaledWidth - this.description.x - OUTER_PADDING, this.getElementPreferredHeight( this.description ) );
    this.setElementPosition( this.deleteIcon, unscaledWidth - this.getElementPreferredWidth( this.deleteIcon ), 0 );

    var descriptionHeight:Number = this.description.y + this.getElementPreferredHeight( this.description );
    var iconHeight:Number = this.iconDisplay ? this.iconDisplay.y + this.getElementPreferredHeight( this.iconDisplay ) : 0;

    //this.setElementSize( this.progressBar, this.description.width, 5 );
    this.progressBar.width = this.description.width;
    this.setElementPosition( this.downloadContainer, 0,Math.max( descriptionHeight, iconHeight ) + OUTER_PADDING );
    this.setElementPosition( this.progressBar, this.description.x, ( this.getElementPreferredHeight( this.downloadContainer ) - this.getElementPreferredHeight( this.progressBar ) ) / 2 );

    var downloadHeight:Number = this.getElementPreferredHeight( this.downloadContainer ) + this.downloadContainer.y;
    this.height = downloadHeight + OUTER_PADDING;
}

private function dataChangeHandler( e:FlexEvent ):void {
    if ( this.data ) {
        this.label = this.data.label.toUpperCase();
    }
}
}
4

1 回答 1

0

好的，所以我设法弄清楚发生了什么。

最初，我尝试将图像添加到downloadContainer这是一个Sprite（诚实的错误；上周刚刚完成了一个 AS3 项目）。似乎downloadContainer.addChild(Image)无法使用，这就是IconItemRenderer使用BitmapImage#createDisplayObject()并添加创建的 DisplayObject 的原因。

我将容器切换到一个组，使用 addElement，并进行ProgressBar扩展UIComponent而不是 Sprite，并且一切都按照我最初认为的那样工作。

所以使用这个：

var container:Group = new Group();
addChild( container );
var image:Image = new Image();
image.source = "blah.png";
container.addElement( image );

这将成功添加图像。

于 2013-08-27T19:41:38.943 回答