对于Flex4来讲,可以自定义skin,然后就可以做出来很漂亮的网格背景。
APP:
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" width="100%" height="100%" skinClass="com.view.skin.CrossGroupSkin" click="application1_clickHandler(event)"> <fx:Script> <![CDATA[ protected function application1_clickHandler(event:MouseEvent):void { (skin as Object).grapWidth -= 1; } ]]> </fx:Script> </s:Application>
SkinClass:
<?xml version="1.0" encoding="utf-8"?> <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabled="0.5"> <fx:Metadata> <![CDATA[ [HostComponent("spark.components.SkinnableContainer")] ]]> </fx:Metadata> <fx:Script fb:purpose="styling"> <![CDATA[ private var _grapWidth: Number = 50; public function set grapWidth(value:Number):void { this._grapWidth = value; this.invalidateDisplayList(); } public function get grapWidth():Number { return _grapWidth; } public function drawGrid():void { this.graphics.clear(); this.graphics.beginFill(0xFFFFFF); this.graphics.drawRect(0, 0, this.width, this.height); this.graphics.endFill(); this.graphics.lineStyle(1, 0xBBBBBB); //画横线 var i : int = 0; var totalLength: Number = 0; while(totalLength < this.height){ if(grapWidth * i < this.height) { this.graphics.moveTo(0, grapWidth * i); this.graphics.lineTo(this.width, grapWidth * i); } else { this.graphics.moveTo(0, this.height); this.graphics.lineTo(this.width, this.height); } totalLength = grapWidth * i; i ++; } //变量清零 totalLength = 0; i = 0; //画竖线 while(totalLength < this.width){ if(grapWidth * i < this.width) { this.graphics.moveTo(grapWidth * i, 0); this.graphics.lineTo(grapWidth * i, this.height ); } else { this.graphics.moveTo(this.width, 0); this.graphics.lineTo(this.width, this.height ); } totalLength = grapWidth * i; i ++; } } override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void { if (isNaN(getStyle("backgroundColor"))) { background.visible = false; } else { background.visible = true; bgFill.color = getStyle("backgroundColor"); bgFill.alpha = getStyle("backgroundAlpha"); } super.updateDisplayList(unscaledWidth, unscaledHeight); drawGrid(); } ]]> </fx:Script> <s:states> <s:State name="normal" /> <s:State name="disabled" /> </s:states> <s:Rect id="background" left="0" right="0" top="0" bottom="0"> <s:fill> <s:SolidColor id="bgFill" color="#FFFFFF"/> </s:fill> </s:Rect> <s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" minWidth="0" minHeight="0"> <s:layout> <s:BasicLayout/> </s:layout> </s:Group> </s:Skin>
相关推荐
以下是我最近做flex组件编程时的总结,是主要针对lineChart的用法,其中某些属性对同是有横纵坐标的columnChart、barChart等都有效,比如对背景的网格线、横纵坐标线条的粗细颜色和标签的设置都有效。
在 4G 业务快速发展、移动运营商间竞争加剧、移动互联网公司新业务对...移动运营商网格集中管理中心系统综合运用了手机APP技术、GIS技术和OLAP技术,并以 FLEX技术和视频流技术为辅助技术,整合监控多方面业务系统,基于
网格和Flex-Box; 移动优先; 后轮驱动; 附加效果: 卡覆盖颜色(第三张卡); 按钮变换:在鼠标悬停时将其向上移动,在单击时(活动状态)将其向下移动,并更改背景颜色; 页脚中的样式链接:添加了漂亮的颜色来...
包含多种方式:HTML中的网格框,CSS中的背景图像,带flex的网格。 基于多次尝试,flexbox似乎是响应最快且视觉上令人满意的产品。 调整屏幕大小时,所有元素都以良好的方式响应。 当屏幕变小时,进行了以下更改: ...
- 您应该从命令行调用 OceanMap,因为单击 .fig 文件不起作用:ActiveX FlexArray 不会初始化。 - 目前,不支持多维数组...如果有人修改软件以获得额外的维度,我很高兴听到。 - 输出矩阵不包含行号和列号,尽管...
您可以使用任何所需的网格标记(例如:Flex或Grid) 真棒字体可用于图标 语义布局 应该使用HTML5语义标记: header , nav , section , article , footer , form + fields, figure 类名应该合理且正确
使用显示网格而不是flex添加卡片部分 有一个“ Data.js”文件,我可以导入内容,而不是对每个组件中的所有内容进行硬编码 目标 创建一个响应式且有吸引力的单页应用程序 创建具有更好编码实践的可重用组件 改善我CSS...
网格:在布局中定义。 布局适应性:否。 使用的框架:无。 跨浏览器兼容性: Chrome,Firefox,Safari,Edge,Internet Explorer 11。 印刷术:在布局中部分定义(其他-由开发人员决定)。 使用的字体: Cuprum,PT...
ASP.NET 2.0:弃用 DataGrid 吧,有新的网格控件了! ASP.NET2.0控件一览---标准控件(1) ASP.NET2.0控件一览---标准控件(2) ASP.NET 2.0中使用webpart系列控件 ASP.NET 2.0 中实现跨页提交 新控件、管理外观、布局及...