Flex4的可视化显示对象

简介: flex3中用addChild(child:DisplayObject) 增加显示对象,flex4中用addElement(element:IVisualElement)。绝大多数的flex3显示控件都是从DispalyObject继承的,所以在flex3中增加显示对象非常容易。

 flex3中用addChild(child:DisplayObject) 增加显示对象,flex4中用addElement(element:IVisualElement)。绝大多数的flex3显示控件都是从DispalyObject继承的,所以在flex3中增加显示对象非常容易。一旦到了flex4,要显示sprite shape Bitmap都会报错,因为都没有实现IVisualElement接口。习惯了flex3,再用flex4的时候还真有点不适应了。

   从adobe帮助文档可以看到直接实现IVisualElement接口的只有如下几个,

GraphicElement, SpriteVisualElement, StyleableTextField, UIComponent, UIMovieClip,spark.primitives 名字空间下的所有类也间接实现了IVisualElement。

 

   直接实现的类都比较轻量级的,所以把你要显示的sprite等加入到这些类中,再把这些类加入可视对象即可

 

 

var spr:Sprite = new Sprite();

var sve:SpriteVisualElement = new SpriteVisualElement();

 

 

 

spr.graphics.beginFill(0xFF0000, 1);

spr.graphics.drawRect(10, 10, 10, 10);

spr.graphics.endFill();

sve.addChild(spr); 

 

 

this.addElement(sve);

 

 

 

    显示位图的做法是,使用spark.primitives下面的BitmapImage

 

var data:BitmapData = new BitmapData( 400, 400, false);

data.fillRect(data.rect, 0x0000FF);

 

    var bitmap:BitmapImage = new BitmapImage();

    bitmap.source = data;

    bitmap.x=50;

    bitmap.y=50;

 

    this.addElement(bitmap);

 

 

 

或者采用SpriteVisualElement类似的做法,把Bitmap加入到UIComponet中

 

var data:BitmapData = new BitmapData( 400, 400, false);

data.fillRect(data.rect, 0x0000FF);

 

var ui:UIComponent = new UIComponent();

 

var bitmap:Bitmap = new Bitmap(data);

ui.addChild(bitmap);

 

this.addElement(ui);

目录
打赏
0
0
0
0
13
分享
相关文章
Echarts组件legend属性显示数据和icon图片自定义的解决方案
Echarts组件legend属性显示数据和icon图片自定义的解决方案
472 0
|
9月前
|
如何使用Pygame的display模块显示文本?
【6月更文挑战第11天】如何使用Pygame的display模块显示文本?
143 6
2行三列的布局如何使用flex进行设计
2行三列的布局如何使用flex进行设计
解释 Auto Layout 是什么,如何使用它来布局界面?
解释 Auto Layout 是什么,如何使用它来布局界面?
121 2
python图形页面:组件布局grid方法
python图形页面:组件布局grid方法
text-overflow实现数据可视化大屏文本滚动自适应伸缩隐藏
text-overflow实现数据可视化大屏文本滚动自适应伸缩隐藏
120 1
3分钟精通flex布局 - flex布局可视化学习工具
现在大前端中被使用最多的布局方式非flex莫属,像h5、pc、小程序、rn、甚至native都在使用flex布局,可见掌握好flex布局是多的重要。 然而在flex布局兴起时,我们学习flex布局的方法大部分就是看一些博客文章的解析,官方文档说明,然后挨个去看各个属性的作用和示例,然后再自己手敲实践几次。这也是我当初学习flex布局的方法,常规手段,也很有效。如果愣是要说一些不足的地方,应该就是不直观,效率不太高。 那有没有一种更直观、更高效的学习方式呢? 为了能解决这个问题,flex布局可视化工具就诞生了。
408 0
3分钟精通flex布局 - flex布局可视化学习工具
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等