Cookbook4 笔记 第四章 图形

4.2 通过轨迹使用描边和填充绘制形状

 

The following is a list of the available commands and their usage. Specifying the uppercase version of a command causes the drawing procedure to treat the parameter values as absolute, while specifying the lowercase version causes it to consider them as relative:

下面是列出了有效的指令和他们的用法。指定指令的大写字母则绘图程序将参数值是为绝对定位，指定小写字母则作为相对位置来考虑。

M/m

Moves the pen to the specified position to begin drawing

将画笔移动到指定位置并开始绘图

L/l

Draws a line segment from the current position to the specified coordinate

绘制一条从当前位置到指定坐标的线段

C/c

Draws a curve segment to the specified coordinate based on supplied control points

绘制一条到指定坐标的曲线段，它基于多个指定的控制点

Q/q

Draws a curve segment to the specified coordinate based on a single control point

绘制一条到指定坐标的曲线段，它基于一个指定的控制点

H/h

Draws a horizontal line

绘制水平线

V/v

Draws a vertical line

绘制垂直线

Z/z

Closes the path

结束路径

The following is an example of drawing a simple polygon using line segments:

下面是用线段绘制的简单多边形示例

 

<s:Path data="M 0 0
		L 100 0
		L 100 100
		L 0 100
		Z">
	<s:stroke>
		<s:SolidColorStroke color="#333333"
							caps="square"
							joints="miter"/>
	</s:stroke>
	<s:fill>
		<s:SolidColor color="#00CCFF"/>
	</s:fill>
</s:Path>

 

指定重叠区域的填充规则

 

<!-- 建立奇偶缠绕类型 -->
<s:Path winding="{GraphicsPathWinding.EVEN_ODD}"/>
<!-- 建立非零缠绕类型 -->
<s:Path winding="{GraphicsPathWinding.NON_ZERO}"/>

 

4.3 在图形中显示文本

 

<?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">
	<fx:Script>
		<![CDATA[
			import spark.utils.TextFlowUtil;
			[Bindable]
			public var txt:String = "<div>" +
				"<img source='assets/icon.png' width='20' height='20' />" +
				"<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit," +
				"<span fontWeight='bold'>sed diam nonummy nibh euismod tincidunt ut" +
				"laoreet dolore</span>" +
				"magna aliquam erat volutpat.</p></div>";
		]]>
	</fx:Script>
	<s:Graphic x="10" y="10">
		<s:RichText width="400" height="60"
					columnCount="4"
					fontFamily="Helvetica"
					textFlow="{TextFlowUtil.importFromString(txt)}"/>
	</s:Graphic>
</s:Application>

 

4.4 图形中显示位图图片

 

 

<s:BitmapImage id="img" width="450" height="400"
			   source="@Embed('assets/icon.jpg')" />
<s:Ellipse id="imgEllipse" width="450" height="400">
	<s:fill>
		<s:BitmapFill id="imgFill"
				fillMode="{BitmapFillMode.REPEAT|BitmapFillMode.CLIP|BitmapFillMode.SCALE}"
				source="@Embed('assets/icon.jpg')" />
	</s:fill>
</s:Ellipse>

 

运行期间加载图像

 

private function handleCreationComplete():void {
	var loader:Loader = new Loader();
	loader.contentLoaderInfo.addEventListener(Event.COMPLETE, handleLoadComplete);
	loader.load(new URLRequest('http://covers.oreilly.com/images/9780596529857/bkt.gif'));
}

private function handleLoadComplete(evt:Event):void {
	var bmp:Bitmap = (evt.target as LoaderInfo).content as Bitmap;
	img.source = bmp;
}

 4.5 显示渐变文本（蒙板）

 

<s:Graphic maskType="{MaskType.ALPHA|MaskType.CLIP|MaskType.LUMINOSITY}">
	<s:Rect width="{textMask.width}" height="{textMask.height}">
		<s:fill>
			<s:LinearGradient rotation="90">
				<s:entries>
					<s:GradientEntry color="#000000" />
					<s:GradientEntry color="#FFFFFF" />
				</s:entries>
			</s:LinearGradient>
		</s:fill>
	</s:Rect>
	<s:mask>
		<s:RichText id="textMask" fontFamily="Arial" fontSize="20">
			<s:content>Hello World!</s:content>
		</s:RichText>
	</s:mask>
</s:Graphic>

4.6 位图蒙板

 

<s:Graphic id="group" maskType="{maskList.selectedItem}">
	<s:Rect width="320" height="320">
		<s:fill>
			<s:LinearGradient>
				<s:entries>
					<s:GradientEntry color="#000000" />
					<s:GradientEntry color="#DDDDDD" />
				</s:entries>
			</s:LinearGradient>
		</s:fill>
	</s:Rect>
	<s:mask>
		<s:Group>
			<s:BitmapImage source="@Embed('/assets/alpha_bitmap.png')" />
		</s:Group>
	</s:mask>
</s:Graphic>

// 控制计算由发光度蒙版设置蒙版的图形元素的 RGB 颜色值的属性。
// 如果为 true，则蒙版中的相应区域将反转并乘以源内容中像素的 RGB 颜色值。
// 如果为 false，则直接使用源内容中像素的 RGB 颜色值。
spark.components.supportClasses.GroupBase.luminosityInvert():Boolean
// 控制发光度蒙版是否剪辑设置了蒙版的内容的属性。
// 只有图形元素应用了类型为 MaskType.LUMINOSITY 的蒙版，此属性才会起作用。
spark.components.supportClasses.GroupBase.luminosityClip():Boolean