我已经扩展IconItemRenderer
来创建我正在处理的项目所需的自定义项呈示器。渲染器现在正常工作,除了我无法弄清楚如何在icon
和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();
}
}
}
答案 0 :(得分: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 );
这将成功添加图像。