`
luhantu
  • 浏览: 204006 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

Flex 做网格背景

阅读更多

对于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>

 

0
0
分享到:
评论
1 楼 song714186420 2013-12-27  
牛,忍不住要赞你一下

相关推荐

    应用flash制作flex样式

    使用`embed`关键字将SWF文件嵌入到CSS中,然后将其作为组件的背景图像或图形资源。 5. **调整样式属性**:通过CSS,可以设置组件的尺寸、位置、颜色和其他视觉属性。还可以定义状态(如鼠标悬停、按下等),以便在...

    Flex中如何根据每行内容设置不同底色

    在Flex开发中,我们经常需要对数据展示进行定制化,比如根据每行数据的不同来设置不同的背景色。这种需求在数据网格(DataGrid)中尤为常见,可以增强数据的可读性和视觉效果。本篇文章将深入讲解如何在Flex中实现这...

    flex中渲染器简介

    例如,如果你试图改变列表中第五行的第四列背景色,你需要注意,一旦用户滚动列表,这个渲染器可能会被用来显示其他数据,因为它会被复用。因此,正确的做法是让渲染器根据所显示的数据动态地改变其自身状态。 内联...

    flex css 模版经典

    - 自动填充网格:在不固定列数的网格系统中,Flexbox能自动填充空白区域。 - 对齐和间距控制:如居中对齐一个元素,或在一行中平均分配多个元素。 6. **压缩包文件解析** - `index.html`:这是网页的入口文件,...

    flex as actionscript datagrid 背景色 flash itemRenderer script iframe overrider 跳转到别的页面

    在Flex开发中,数据网格(DataGrid)是用于展示大量结构化数据的组件,它允许用户进行交互式浏览和操作。ActionScript是Flex的核心编程语言,用于实现动态功能和交互。在标题和描述中提到的知识点主要涉及Flex ...

    Flex 表格单元格合并

    在Flex开发中,表格(DataGrid)是一种常用的数据展示组件,它允许我们以网格的形式显示大量数据。在某些场景下,比如需要展示汇总信息或创建复杂的报表时,我们可能需要合并表格的单元格来增强视觉效果和信息组织。...

    Flex4 电视墙效果

    例如,Grid布局可以用于创建规则的网格,而HorizontalLayout或VerticalLayout则适用于一维的滚动效果。 3. **数据绑定**:Flex4支持强大的数据绑定机制,可以将数据源与UI组件关联,方便地更新显示内容。电视墙中的...

    Flex应用AdvancedDataGrid表头皮肤

    在Flex开发中,AdvancedDataGrid组件是用于展示大量复杂数据的高级网格控件。它提供了比基本DataGrid更丰富的功能,如多级表头、排序、分组、过滤和自定义渲染等。本文将深入探讨Flex应用中的AdvancedDataGrid表头...

    Flex Grid制作复杂表格

    Flex Grid是一种在Adobe Flex开发环境中用于创建数据网格的组件,它允许开发者构建具有复杂布局和功能的表格。在本文中,我们将深入探讨如何利用Flex Grid来制作复杂的表格,并结合提供的文件进行解析。 首先,让...

    flex 日历组件

    通常,组件会显示一个网格布局,每个格子代表一天,可以标记特殊日期,如节假日或已预订的日子。用户可以通过点击特定日期来选中,同时,组件还可以配置为支持多选模式,允许用户选择连续或不连续的日期范围。 创建...

    flex LineChart

    以下是我最近做flex组件编程时的总结,是主要针对lineChart的用法,其中某些属性对同是有横纵坐标的columnChart、barChart等都有效,比如对背景的网格线、横纵坐标线条的粗细颜色和标签的设置都有效。

    Flex入门基础教程

    #### 一、Flex简介与背景 Flex是一种开源框架,用于构建具有表现力的Web应用程序,这些程序可以跨浏览器、桌面和操作系统流畅运行。Adobe Systems在2004年发布了Flex的第一个版本,并在之后的几年里不断更新和完善...

    Flex书籍

    Flex框架包含了一系列预制的组件,例如按钮、数据网格、滑动条等,可以使得开发者快速搭建应用程序界面。此外,Flex还支持与服务器端技术的集成,如PHP、Java EE等,方便数据的交互和处理。 描述:“NULL 博文链接...

    CSS3商品图片网格布局动画特效.zip

    通过设置`display: flex`和相关的flex属性,可以轻松地调整元素的顺序、大小和对齐方式,使图片在网格中整齐排列。 2. **伪类选择器**:如`:hover`,当鼠标悬停在元素上时,可以应用特定的样式,比如改变图片的透明...

    twaver for flex 开发手册

    - **twaver.Grid**:网格组件用于显示网格背景,便于定位节点位置。 #### 八、TWaverFlex 使用技巧 除了上述内容之外,TWaverFlex 还提供了一些实用的功能和技巧,例如: - **自定义样式**:可以通过修改 CSS ...

    html5九宫格布局的网格菜单效果.zip

    例如,可以设置为`display: grid`或`display: flex`来实现灵活的网格系统。`grid-template-columns`和`grid-template-rows`属性则用于定义网格的列数和行数,比如`grid-template-columns: repeat(3, 1fr)`表示创建3...

    flex写的贪吃蛇

    1. 绘制网格:使用Flex的绘图API(如Graphics类)绘制二维网格,形成游戏背景。 2. 绘制蛇与食物:同样通过Graphics类,根据蛇和食物的坐标绘制矩形或形状,完成游戏元素的视觉呈现。 六、优化与扩展 1. 性能优化...

    FLEX4 s:dataGrid单元格弹出可文本

    5. **关闭和管理弹出组件**:为了提供良好的用户体验,确保提供一个关闭按钮或者通过其他方式(如点击背景)关闭弹出组件。使用`PopUpManager.removePopUp()`方法关闭组件。 在项目中,`bin-release`目录包含了编译...

    js和CSS3炫酷图片网格缩放动画特效

    4. **图片网格**:图片网格是一种常见的网页布局方式,通过CSS的`display: grid`或`display: flex`属性可以轻松实现。每个网格项在被点击时触发缩放动画,这需要结合jQuery的事件监听和anime.js的动画函数来完成。 ...

Global site tag (gtag.js) - Google Analytics