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