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

flex4 倾斜字体

 
阅读更多
倾斜字体要在flex3中做的话用
选择特效:
mx.effects.Rotate来处理
<mx:Script>
        <![CDATA[
           [Bindable]
            public var angle:int=0;
      ]]>
</mx:Script>
    <mx:Rotate id="rotate" angleFrom="{angle-45}" angleTo="{angle}" target="{myVB}"/>
<mx:Label showEffect="{rotate}" />
而在flex4中对label做了扩展,先上图:

<?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">
	<s:layout>
		<s:VerticalLayout horizontalAlign="center" paddingTop="20" gap="20"/>
	</s:layout>
	<fx:Script>
		<![CDATA[
		]]>
	</fx:Script>
	<s:HSlider id="mySlider"
			   width="150"
			   minimum="-180" maximum="180" value="0"
			   liveDragging="true"/>
	<s:Label 
			 text="Rotated Text" fontSize="24"
			 rotation="{mySlider.value}"/>
	
</s:Application>


--TextFlow反转字体(0-360反转)
	<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
			 xmlns:s="library://ns.adobe.com/flex/spark"
			 xmlns:mx="library://ns.adobe.com/flex/halo"
			 width="500" height="300">
		<fx:Script>
			<![CDATA[
				import flash.text.engine.TextRotation;
				import flashx.textLayout.formats.BlockProgression;
				import flashx.textLayout.formats.VerticalAlign;
				import mx.collections.ArrayList;
				import spark.events.IndexChangeEvent;
				protected function rotateText(event:IndexChangeEvent):void {
					var target:String = event.target.selectedItem;
					switch(target) {
						case "0":
					//	Here, the textRotation for each character in the TextFlow is changed:
							tArea.textFlow.textRotation = TextRotation.ROTATE_0;
							break;
						case "90":
						tArea.textFlow.textRotation = TextRotation.ROTATE_90;
						break;
						case "180":
						tArea.textFlow.textRotation = TextRotation.ROTATE_180;
						break;
						case "270":
						tArea.textFlow.textRotation = TextRotation.ROTATE_270;
						break;
					}
					tArea.textFlow.invalidateAllFormats();
					tArea.textFlow.flowComposer.updateAllControllers();
				}
			]]>
		</fx:Script>
		<s:ComboBox change="rotateText(event)" x="400"
					dataProvider="{new ArrayList(['0', '90', '180', '270'])}"/>
		<s:RichText id="tArea" width="300" fontSize="20" paddingTop="10">
			<s:textFlow>
				<s:TextFlow>
					<s:p>
					中国四川省广安县协兴乡牌坊村的一个客家家庭
					</s:p>
					<s:p>
						Vertical alignment or justification (adopts default value if
						undefined during cascade). Determines how TextFlow elements
						align within the container.
					</s:p>
				</s:TextFlow>
			</s:textFlow>
		</s:RichText>
	</s:Group>
  • 大小: 2.3 KB
分享到:
评论

相关推荐

    Flex漂亮的柱状图,横坐标倾斜45度显示amChart

    标签倾斜后,我们可能还需要处理字体大小和标签间距,以确保可读性。amChart提供了调整这些属性的方法,如`labelRotation`, `labelAnchor`, `labelShift`等。同时,如果标签依然过长,可以考虑使用自动换行或者截断...

    FLEX验证码

    可以随机变化字体大小、倾斜角度、颜色等属性。 4. **添加干扰元素**:在验证码图像上添加线条、点或其他图形元素,以增加识别难度。 5. **保存和显示**:将处理后的图像数据转换为位图格式,并在网页上显示出来,...

    jquery右倾斜导航菜单

    基础样式包括颜色、字体、边距等,而倾斜效果则通过transform: rotateX()实现。我们可以为未激活的菜单项和激活/悬停状态分别设置不同的倾斜角度: ```css #tiltedMenu ul { list-style-type: none; display: ...

    css3技能列表创意的文字布局代码

    4. **Web字体与字体堆栈** - **Web字体**:通过`@font-face`规则,可以引入网络上的自定义字体,提升文字视觉表现。 - **字体堆栈**:利用`font-family`属性指定多个字体,当首选字体不可用时,浏览器会尝试下一个...

    HTML5和CSS3详细总结

    - **`skew()`**:倾斜元素。 - **3D变换**: - **`translate3d()`**:在x轴、y轴和z轴上移动元素。 - **`rotate3d()`**:沿任意轴旋转元素。 - **`perspective()`**:设置元素的透视距离。 ##### 3.3 过渡和...

    基本CSS样式表大全

    ` 倾斜字体样式。 - `font-style: italic;` 斜体字体样式。 - `font-style: normal;` 正常字体样式。 3. **行高** (`line-height`): 控制行间距。 - `line-height: normal;` 设置正常的行高。 4. **字体粗细** ...

    css3.0参考手册-设计师必备手册

    `transform`属性允许元素在二维或三维空间内进行旋转(`rotate`)、缩放(`scale`)、平移(`translate`)和倾斜(`skew`)。`transform-origin`定义变形的基点。 以上仅是CSS3.0众多特性和知识点的一部分,实际...

    CSS3.0参考手册

    4. **字体大小单位**:`em`、`rem`等相对单位使得字体大小更具适应性。 **五、CSS3.0的浏览器兼容性** CSS3.0的许多新特性在不同浏览器间的兼容性有所不同。开发时需考虑前缀如`-webkit-`、`-moz-`、`-ms-`、`-o-`...

    CSS3教程 传智播客

    - **2D变换**:包括缩放(scale)、旋转(rotate)、倾斜(skew)和平移(translate)等。 - **3D变换**:除了2D变换外,还可以在Z轴上进行操作,实现更为复杂的三维效果。 6. **过渡与动画** - **过渡(Transitions)**...

    css入门笔记

    4.伪类选择器 作用:匹配元素不同状态的选择器 语法:所有的伪类都是以 : 作为开始 选择器:伪类选择器{样式} 伪类分类 1.伪类链接 :link 匹配尚未访问的超级链接状态 :visited 匹配访问过的元素的状态 2....

    html5-css3知识点和面试题.docx

    `@font-face`允许设计师嵌入自定义字体;`direction`控制文本的书写方向,如从左到右或从右到左。 3. **颜色处理**:`opacity`设置元素的不透明度;`rgba()`允许指定颜色的透明度;`linear-gradient`和`radial-...

    CSS属性大全详解.doc

    - `font-style`: 控制字体样式,包括`normal`、`italic`和`oblique`,其中`italic`表示斜体,`oblique`表示倾斜。 - `font-weight`: 设置字体的粗细,如`normal`(400磅)和`bold`(700磅)。 - `font-variant`: ...

    前端 60 道面试题及答案.docx

    4. 有利于开发和维护,语义化更具可读性,代码更好维护,与 CSS3 关系更和谐 如:&lt;header&gt; 代表头部,&lt;nav&gt; 代表超链接区域,&lt;main&gt; 定义文档主要内容,&lt;article&gt; 可以表示文章、博客等内容,&lt;aside&gt; 通常表示侧...

    css中文完全参考手册

    4. **字体属性**: - `font-family`:指定字体系列,如`Arial, sans-serif`。 - `font-size`:设置字体大小,可使用相对或绝对单位。 - `font-weight`和`font-style`:控制字体的粗细和斜体。 5. **背景属性**:...

    html和css 常用

    6. 字体属性涉及字体系列、大小、加粗、斜体等样式。 7. 文本属性包括文本对齐、缩进、间距等。 8. 文本颜色可以通过颜色名称、十六进制代码、RGB值等方式设置。 9. 可以通过CSS设置鼠标指针的不同形状。 10. 宽高...

    CSS3小结

    弹性盒模型(Flexbox)允许开发者创建响应式和动态的布局,通过flex-direction、justify-content和align-items等属性控制元素的排列方式。 9. **Grid 布局** CSS Grid布局提供了二维网格系统,用于更精确地控制...

    大气扁平风格CSS3模板是一款黄色大气简洁风格的CSS3网站模板下载。_html网站模板_网页源码移动端前端_H5模板.rar

    8. **字体图标**:CSS3支持使用@font-face规则引入自定义字体,甚至包括图标字体库,这使得网页设计可以使用丰富的图标资源,同时保持良好的性能。 9. **颜色与颜色模式**:新增的HSL和HSLA色彩模式提供了色相、...

    css3-cheat-sheet_IDEAL_cheatsheet_css_

    4. **Flexbox**:弹性布局模型,通过`display: flex`定义容器,`flex-direction`, `justify-content`, `align-items`等控制元素排列。 5. **Grid布局**:`display: grid`和`grid-template-columns/rows`等属性创建...

    css3参考手册

    主要属性有`display: flex`, `flex-direction`, `justify-content`, `align-items`等。 6. **Grid布局** CSS Grid布局提供了二维布局系统,可以方便地创建网格结构。`grid-template-columns`和`grid-template-rows...

    CSS3的简单教程

    4. **变形与动画**:`transform`属性可以对元素进行旋转、缩放、平移和倾斜等操作。配合`transition`和`animation`,可以创建出动态过渡效果和自定义动画,提升用户体验。 5. **Flexbox**:Flex布局模型允许开发者...

Global site tag (gtag.js) - Google Analytics