0

私IconItemRendererが取り組んでいるプロジェクトに必要なカスタム アイテム レンダラーを作成するために拡張しました。iconとdecorator. _ さらに 3 つの画像を追加する必要がありますが、その方法がわかりません。

私が試したこと (レンダラーは完全に 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)できないように見えるため、作成された DisplayObject をIconItemRenderer使用して追加します。BitmapImage#createDisplayObject()

コンテナをグループに切り替え、addElement を使用し、 Sprite の代わりにProgressBar拡張するUIComponentと、すべてが本来あるべきだと思っていたとおりに機能しました。

だからこれを使う：

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 に答える