# Graphics

继承 Graphics View 模块 hilo/view/Graphics 依赖 hilo/core/Hilo, hilo/core/Class, hilo/view/View, hilo/view/CacheMixin 源码 Graphics.js
Graphics类包含一组创建矢量图形的方法。

### 属性概览

显示继承属性

| 属性 | 定义于
--- | --- | ---
| fillAlpha:Number 内容填充的透明度。默认值为0。只读属性。 | Graphics
| fillStyle:String 内容填充的样式。默认值为'0'，即黑色。只读属性。 | Graphics
| lineAlpha:Number 笔画的线条透明度。默认为1。只读属性。 | Graphics
| lineCap:String 笔画的线条端部样式。可选值有：butt、round、square等，默认为null。只读属性。 | Graphics
| lineJoin:String 笔画的线条连接样式。可选值有：miter、round、bevel等，默认为null。只读属性。 | Graphics
| lineWidth:Number 笔画的线条宽度。默认为1。只读属性。 | Graphics
| miterLimit:Number 斜连线长度和线条宽度的最大比率。此属性仅当lineJoin为miter时有效。默认值为10。只读属性。 | Graphics
| strokeStyle:String 笔画边框的样式。默认值为'0'，即黑色。只读属性。 | Graphics
| align:String|Function 可视对象相对于父容器的对齐方式。取值可查看Hilo.align枚举对象。 | View
| alpha:Number 可视对象的透明度。默认值为1。 | View
| background:Object 可视对象的背景样式。可以是CSS颜色值、canvas的gradient或pattern填充。 | View
| boundsArea:Array 可视对象的区域顶点数组。格式为：[{x:10, y:10}, {x:20, y:20}]。 | View
| depth:Number 可视对象的深度，也即z轴的序号。只读属性。 | View
| drawable:Drawable 可视对象的可绘制对象。供高级开发使用。 | View
| height:Number 可视对象的高度。默认值为0。 | View
| id:String 可视对象的唯一标识符。 | View
| mask:Graphics 可视对象的遮罩图形。 | View
| onUpdate:Function 更新可视对象，此方法会在可视对象渲染之前调用。此函数可以返回一个Boolean值。若返回false，则此对象不会渲染。默认值为null。 限制：如果在此函数中改变了可视对象在其父容器中的层级，当前渲染帧并不会正确渲染，而是在下一渲染帧。可在其父容器的onUpdate方法中来实现。 | View
| parent:Container 可视对象的父容器。只读属性。 | View
| pivotX:Number 可视对象的中心点的x轴坐标。默认值为0。 | View
| pivotY:Number 可视对象的中心点的y轴坐标。默认值为0。 | View
| pointerEnabled:Boolean 可视对象是否接受交互事件。默认为接受交互事件，即true。 | View
| rotation:Number 可视对象的旋转角度。默认值为0。 | View
| scaleX:Number 可视对象在x轴上的缩放比例。默认为不缩放，即1。 | View
| scaleY:Number 可视对象在y轴上的缩放比例。默认为不缩放，即1。 | View
| tint:Number 可视对象的附加颜色，默认0xFFFFFF，只支持WebGL模式。 | View
| transform:Matrix 可视对象的transform属性，如果设置将忽略x, y, scaleX, scaleY, rotation. | View
| visible:Boolean 可视对象是否可见。默认为可见，即true。 | View
| width:Number 可视对象的宽度。默认值为0。 | View
| x:Number 可视对象的x轴坐标。默认值为0。 | View
| y:Number 可视对象的y轴坐标。默认值为0。 | View

### 方法概览

显示继承方法

| 方法 | 定义于
--- | --- | ---
| Graphics(properties:Object) 构造函数 | Graphics
| beginBitmapFill(image:HTMLImageElement, repetition:String):Graphics 开始一个位图填充样式。 | Graphics
| beginFill(fill:String, alpha:Number):Graphics 指定绘制图形的填充样式和透明度。 | Graphics
| beginLinearGradientFill(x0:Number, y0:Number, x1:Number, y1:Number, colors:Array, ratios:Array):Graphics 指定绘制图形的线性渐变填充样式。 | Graphics
| beginPath():Graphics 开始一个新的路径。 | Graphics
| beginRadialGradientFill(x0:Number, y0:Number, r0:Number, x1:Number, y1:Number, r1:Number, colors:Array, ratios:Array):Graphics 指定绘制图形的放射性渐变填充样式。 | Graphics
| bezierCurveTo(cp1x:Number, cp1y:Number, cp2x:Number, cp2y:Number, x:Number, y:Number):Graphics 绘制从当前位置开始到点(x, y)结束的贝塞尔曲线。 | Graphics
| cache(forceUpdate:Boolean) 缓存到图片里。可用来提高渲染效率。 | Graphics
| clear():Graphics 清除所有绘制动作并复原所有初始状态。 | Graphics
| closePath():Graphics 关闭当前的路径。 | Graphics
| drawCircle(x:Number, y:Number, radius:Number):Graphics 绘制一个圆。 | Graphics
| drawEllipse(x:Number, y:Number, width:Number, height:Number):Graphics 绘制一个椭圆。 | Graphics
| drawRect(x:Number, y:Number, width:Number, height:Number):Graphics 绘制一个矩形。 | Graphics
| drawRoundRect(x:Number, y:Number, width:Number, height:Number, cornerSize:Number):Graphics 绘制一个圆角矩形。 | Graphics
| drawRoundRectComplex(x:Number, y:Number, width:Number, height:Number, cornerTL:Number, cornerTR:Number, cornerBR:Number, cornerBL:Number):Graphics 绘制一个复杂的圆角矩形。 | Graphics
| drawSVGPath(pathData:String):Graphics 根据参数指定的SVG数据绘制一条路径。不支持Arcs。 代码示例: var path = 'M250 150 L150 350 L350 350 Z'; var shape = new Hilo.Graphics({width:500, height:500}); shape.drawSVGPath(path).beginFill('#0ff').endFill(); | Graphics
| endFill():Graphics 应用并结束笔画的绘制和图形样式的填充。 | Graphics
| lineStyle(thickness:Number, lineColor:String, lineAlpha:Number, lineCap:String, lineJoin:String, miterLimit:Number):Graphics 指定绘制图形的线条样式。 | Graphics
| lineTo(x:Number, y:Number):Graphics 绘制从当前位置开始到点(x, y)结束的直线。 | Graphics
| moveTo(x:Number, y:Number):Graphics 将当前绘制位置移动到点(x, y)。 | Graphics
| quadraticCurveTo(cpx:Number, cpy:Number, x:Number, y:Number):Graphics 绘制从当前位置开始到点(x, y)结束的二次曲线。 | Graphics
| setCacheDirty(dirty:Boolean) 设置缓存是否dirty | Graphics
| setLineDash(segments:Number[]) 设置虚线样式 | Graphics
| updateCache() 更新缓存 | Graphics
| addTo(container:Container, index:Uint):View 添加此对象到父容器。 | View
| fire(type:String, detail:Object):Boolean 发送事件。当第一个参数类型为Object时，则把它作为一个整体事件对象。 | View
| getBounds():Array 获取可视对象在舞台全局坐标系内的外接矩形以及所有顶点坐标。 | View
| getScaledHeight():Number 返回可视对象缩放后的高度。 | View
| getScaledWidth():Number 返回可视对象缩放后的宽度。 | View
| getStage():Stage 返回可视对象的舞台引用。若对象没有被添加到舞台，则返回null。 | View
| hitTestObject(object:View, usePolyCollision:Boolean) 检测object参数指定的对象是否与其相交。 | View
| hitTestPoint(x:Number, y:Number, usePolyCollision:Boolean):Boolean 检测由x和y参数指定的点是否在其外接矩形之内。 | View
| off(type:String, listener:Function):Object 删除一个事件监听。如果不传入任何参数，则删除所有的事件监听；如果不传入第二个参数，则删除指定类型的所有事件监听。 | View
| on(type:String, listener:Function, once:Boolean):Object 增加一个事件监听。 | View
| removeFromParent():View 从父容器里删除此对象。 | View
| render(renderer:Renderer, delta:Number) 可视对象的具体渲染逻辑。子类可通过覆盖此方法实现自己的渲染。 | View
| toString():String 返回可视对象的字符串表示。 | View

### 属性详情

fillAlpha:Number
内容填充的透明度。默认值为0。只读属性。
fillStyle:String
内容填充的样式。默认值为'0'，即黑色。只读属性。
lineAlpha:Number
笔画的线条透明度。默认为1。只读属性。
lineCap:String
笔画的线条端部样式。可选值有：butt、round、square等，默认为null。只读属性。
lineJoin:String
笔画的线条连接样式。可选值有：miter、round、bevel等，默认为null。只读属性。
lineWidth:Number
笔画的线条宽度。默认为1。只读属性。
miterLimit:Number
斜连线长度和线条宽度的最大比率。此属性仅当lineJoin为miter时有效。默认值为10。只读属性。
strokeStyle:String
笔画边框的样式。默认值为'0'，即黑色。只读属性。

### 构造函数

Graphics(properties:Object)

parameters
properties:Object — 创建对象的属性参数。可包含此类所有可写属性。

### 方法详情

beginBitmapFill(image:HTMLImageElement, repetition:String):Graphics
开始一个位图填充样式。

parameters
image:HTMLImageElement — 指定填充的Image对象。
repetition:String — 指定填充的重复设置参数。它可以是以下任意一个值：repeat, repeat-x, repeat-y, no-repeat。默认为''。

return
  Graphics — Graphics对象本身。

beginFill(fill:String, alpha:Number):Graphics
指定绘制图形的填充样式和透明度。

parameters
fill:String — 填充样式。可以是color、gradient或pattern。
alpha:Number — 透明度。

return
  Graphics — Graphics对象本身。

beginLinearGradientFill(x0:Number, y0:Number, x1:Number, y1:Number, colors:Array, ratios:Array):Graphics
指定绘制图形的线性渐变填充样式。

parameters
x0:Number — 渐变的起始点的x轴坐标。
y0:Number — 渐变的起始点的y轴坐标。
x1:Number — 渐变的结束点的x轴坐标。
y1:Number — 渐变的结束点的y轴坐标。
colors:Array — 渐变中使用的CSS颜色值数组。
ratios:Array — 渐变中开始与结束之间的位置数组。需与colors数组里的颜色值一一对应，介于0.0与1.0之间的值。

return
  Graphics — Graphics对象本身。

beginPath():Graphics
开始一个新的路径。

return
  Graphics — Graphics对象本身。

beginRadialGradientFill(x0:Number, y0:Number, r0:Number, x1:Number, y1:Number, r1:Number, colors:Array, ratios:Array):Graphics
指定绘制图形的放射性渐变填充样式。

parameters
x0:Number — 渐变的起始圆的x轴坐标。
y0:Number — 渐变的起始圆的y轴坐标。
r0:Number — 渐变的起始圆的半径。
x1:Number — 渐变的结束圆的x轴坐标。
y1:Number — 渐变的结束圆的y轴坐标。
r1:Number — 渐变的结束圆的半径。
colors:Array — 渐变中使用的CSS颜色值数组。
ratios:Array — 渐变中开始与结束之间的位置数组。需与colors数组里的颜色值一一对应，介于0.0与1.0之间的值。

return
  Graphics — Graphics对象本身。

bezierCurveTo(cp1x:Number, cp1y:Number, cp2x:Number, cp2y:Number, x:Number, y:Number):Graphics
绘制从当前位置开始到点(x, y)结束的贝塞尔曲线。

parameters
cp1x:Number — 控制点cp1的x轴坐标。
cp1y:Number — 控制点cp1的y轴坐标。
cp2x:Number — 控制点cp2的x轴坐标。
cp2y:Number — 控制点cp2的y轴坐标。
x:Number — x轴坐标。
y:Number — y轴坐标。

return
  Graphics — Graphics对象本身。

cache(forceUpdate:Boolean)
缓存到图片里。可用来提高渲染效率。

parameters
forceUpdate:Boolean — 是否强制更新缓存

clear():Graphics
清除所有绘制动作并复原所有初始状态。

return
  Graphics — Graphics对象本身。

closePath():Graphics
关闭当前的路径。

return
  Graphics — Graphics对象本身。

drawCircle(x:Number, y:Number, radius:Number):Graphics
绘制一个圆。

parameters
x:Number — x轴坐标。
y:Number — y轴坐标。
radius:Number — 圆的半径。

return
  Graphics — Graphics对象本身。

drawEllipse(x:Number, y:Number, width:Number, height:Number):Graphics
绘制一个椭圆。

parameters
x:Number — x轴坐标。
y:Number — y轴坐标。
width:Number — 椭圆的宽度。
height:Number — 椭圆的高度。

return
  Graphics — Graphics对象本身。

drawRect(x:Number, y:Number, width:Number, height:Number):Graphics
绘制一个矩形。

parameters
x:Number — x轴坐标。
y:Number — y轴坐标。
width:Number — 矩形的宽度。
height:Number — 矩形的高度。

return
  Graphics — Graphics对象本身。

drawRoundRect(x:Number, y:Number, width:Number, height:Number, cornerSize:Number):Graphics
绘制一个圆角矩形。

parameters
x:Number — x轴坐标。
y:Number — y轴坐标。
width:Number — 圆角矩形的宽度。
height:Number — 圆角矩形的高度。
cornerSize:Number — 圆角矩形的圆角大小。

return
  Graphics — Graphics对象本身。

drawRoundRectComplex(x:Number, y:Number, width:Number, height:Number, cornerTL:Number, cornerTR:Number, cornerBR:Number, cornerBL:Number):Graphics
绘制一个复杂的圆角矩形。

parameters
x:Number — x轴坐标。
y:Number — y轴坐标。
width:Number — 圆角矩形的宽度。
height:Number — 圆角矩形的高度。
cornerTL:Number — 圆角矩形的左上圆角大小。
cornerTR:Number — 圆角矩形的右上圆角大小。
cornerBR:Number — 圆角矩形的右下圆角大小。
cornerBL:Number — 圆角矩形的左下圆角大小。

return
  Graphics — Graphics对象本身。

drawSVGPath(pathData:String):Graphics
根据参数指定的SVG数据绘制一条路径。不支持Arcs。 代码示例:

var path = 'M250 150 L150 350 L350 350 Z';

var shape = new Hilo.Graphics({width:500, height:500});

shape.drawSVGPath(path).beginFill('#0ff').endFill();

parameters
pathData:String — 要绘制的SVG路径数据。

return
  Graphics — Graphics对象本身。

endFill():Graphics
应用并结束笔画的绘制和图形样式的填充。

return
  Graphics — Graphics对象本身。

lineStyle(thickness:Number, lineColor:String, lineAlpha:Number, lineCap:String, lineJoin:String, miterLimit:Number):Graphics
指定绘制图形的线条样式。

parameters
thickness:Number — 线条的粗细值。默认为1。
lineColor:String — 线条的CSS颜色值。默认为黑色，即'0'。
lineAlpha:Number — 线条的透明度值。默认为不透明，即1。
lineCap:String — 线条的端部样式。可选值有：butt、round、square等，默认值为null。
lineJoin:String — 线条的连接样式。可选值有：miter、round、bevel等，默认值为null。
miterLimit:Number — 斜连线长度和线条宽度的最大比率。此属性仅当lineJoin为miter时有效。默认值为10。

return
  Graphics — Graphics对象本身。

lineTo(x:Number, y:Number):Graphics
绘制从当前位置开始到点(x, y)结束的直线。

parameters
x:Number — x轴坐标。
y:Number — y轴坐标。

return
  Graphics — Graphics对象本身。

moveTo(x:Number, y:Number):Graphics
将当前绘制位置移动到点(x, y)。

parameters
x:Number — x轴坐标。
y:Number — y轴坐标。

return
  Graphics — Graphics对象本身。

quadraticCurveTo(cpx:Number, cpy:Number, x:Number, y:Number):Graphics
绘制从当前位置开始到点(x, y)结束的二次曲线。

parameters
cpx:Number — 控制点cp的x轴坐标。
cpy:Number — 控制点cp的y轴坐标。
x:Number — x轴坐标。
y:Number — y轴坐标。

return
  Graphics — Graphics对象本身。

setCacheDirty(dirty:Boolean)
设置缓存是否dirty

parameters
dirty:Boolean — 是否dirty

setLineDash(segments:Number[])
设置虚线样式

parameters
segments:Number[] — 一组描述交替绘制线段和间距（坐标空间单位）长度的数字

查看相关
  https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/setLineDash

updateCache()
更新缓存