# Graphics

Inheritance Graphics View Module hilo/view/Graphics Requires hilo/core/Hilo, hilo/core/Class, hilo/view/View, hilo/view/CacheMixin Source Graphics.js
Graphics class contains a group of functions for creating vector graphics.

### Properties

Show Inherited Properties

| Property | Defined
--- | --- | ---
| fillAlpha:Number The transparency of color or style inside shapes, default value is 0, readonly! | Graphics
| fillStyle:String The color or style to use inside shapes, default value is 0 (the black color), readonly! | Graphics
| lineAlpha:Number The alpha value (transparency) of line, default value is 1, readonly! | Graphics
| lineCap:String The style of how every end point of line are drawn, value options: butt, round, square. | Graphics
| lineJoin:String The joint style of two lines. | Graphics
| lineWidth:Number The thickness of lines in space units, default value is 1, readonly! | Graphics
| miterLimit:Number The miter limit ratio in space units, works only when lineJoin value is miter. | Graphics
| strokeStyle:String The color or style to use for lines around shapes, default value is 0 (the black color), readonly! | Graphics
| align:String|Function The alignment of the view, the value must be one of Hilo.align enum. | View
| alpha:Number The opacity of the view, default value is 1. | View
| background:Object The background style to fill the view, can be css color, gradient or pattern of canvas | View
| boundsArea:Array The vertex points of the view, the points are relative to the center point. | View
| depth:Number The z index of the view, readonly! | View
| drawable:Drawable The drawable object of the view. | View
| height:Number The height of the view, default value is 0. | View
| id:String The identifier for the view. | View
| mask:Graphics Sets a mask for the view. | View
| onUpdate:Function This method will call while the view need update(usually caused by ticker update). | View
| parent:Container The parent view of this view, readonly! | View
| pivotX:Number Position of the center point on the x axis of the view, default value is 0. | View
| pivotY:Number Position of the center point on the y axis of the view, default value is 0. | View
| pointerEnabled:Boolean Is the view can receive DOM events, default value is true. | View
| rotation:Number The rotation of the view in angles, default value is 0. | View
| scaleX:Number The x axis scale factor of the view, default value is 1. | View
| scaleY:Number The y axis scale factor of the view, default value is 1. | View
| tint:Number The tint applied to the view，default is 0xFFFFFF.Only support in WebGL mode. | View
| transform:Matrix The transform of the view.If set the transform, x, y, scaleX, scaleY, rotation, pivotX, pivotY will be ignored.default is null. | View
| visible:Boolean The visibility of the view. | View
| width:Number The width of the view, default value is 0. | View
| x:Number The position of the view on the x axis relative to the local coordinates of the parent, default value is 0. | View
| y:Number The position of the view on the y axis relative to the local coordinates of the parent, default value is 0. | View

### Methods

Show Inherited Methods

| Method | Defined
--- | --- | ---
| Graphics(properties:Object) Constructor | Graphics
| beginBitmapFill(image:HTMLImageElement, repetition:String):Graphics Begin an image filling pattern. | Graphics
| beginFill(fill:String, alpha:Number):Graphics Set how to fill shapes and the transparency. | Graphics
| beginLinearGradientFill(x0:Number, y0:Number, x1:Number, y1:Number, colors:Array, ratios:Array):Graphics Set linear gradient filling style to draw shapes. | Graphics
| beginPath():Graphics Begin a new path. | Graphics
| beginRadialGradientFill(x0:Number, y0:Number, r0:Number, x1:Number, y1:Number, r1:Number, colors:Array, ratios:Array):Graphics Set radial gradient filling style to draw shapes. | Graphics
| bezierCurveTo(cp1x:Number, cp1y:Number, cp2x:Number, cp2y:Number, x:Number, y:Number):Graphics Draw a Bézier curve from current point to the point on coordinate (x, y). | Graphics
| cache(forceUpdate:Boolean) Cache the view. | Graphics
| clear():Graphics Clear all draw actions and reset to the initial state. | Graphics
| closePath():Graphics Close current path. | Graphics
| drawCircle(x:Number, y:Number, radius:Number):Graphics Draw a circle. | Graphics
| drawEllipse(x:Number, y:Number, width:Number, height:Number):Graphics Draw an ellipse. | Graphics
| drawRect(x:Number, y:Number, width:Number, height:Number):Graphics Draw a rectangle. | Graphics
| drawRoundRect(x:Number, y:Number, width:Number, height:Number, cornerSize:Number):Graphics Draw a rounded rectangle. | Graphics
| drawRoundRectComplex(x:Number, y:Number, width:Number, height:Number, cornerTL:Number, cornerTR:Number, cornerBR:Number, cornerBL:Number):Graphics Draw a complex rounded rectangle. | Graphics
| drawSVGPath(pathData:String):Graphics Draw a path from the SVG data given by parameters. | Graphics
| endFill():Graphics Apply and end lines-drawing and shapes-filling. | Graphics
| lineStyle(thickness:Number, lineColor:String, lineAlpha:Number, lineCap:String, lineJoin:String, miterLimit:Number):Graphics Set the lines style for drawing shapes. | Graphics
| lineTo(x:Number, y:Number):Graphics Draw a line from current point to the point on the coordinate value (x, y). | Graphics
| moveTo(x:Number, y:Number):Graphics Move current drawing point to a new point on coordinate values (x, y). | Graphics
| quadraticCurveTo(cpx:Number, cpy:Number, x:Number, y:Number):Graphics Draw a quadratic Bézier curve from current point to the point on coordinate (x, y). | Graphics
| setCacheDirty(dirty:Boolean) set the cache state diry. | Graphics
| setLineDash(segments:Number[]) 设置虚线样式 | Graphics
| updateCache() Update the cache. | Graphics
| addTo(container:Container, index:Uint):View Add current view to a Contaner. | View
| fire(type:String, detail:Object):Boolean Send events. | View
| getBounds():Array Get the bounds of the view as a circumscribed rectangle and all vertex points relative to the coordinates of the stage. | View
| getScaledHeight():Number Get the scaled height of the view. | View
| getScaledWidth():Number Get the scaled width of the view. | View
| getStage():Stage Get the stage object of the view. | View
| hitTestObject(object:View, usePolyCollision:Boolean) Determining whether an object is in the circumscribed rectangle of current view. | View
| hitTestPoint(x:Number, y:Number, usePolyCollision:Boolean):Boolean Determining whether a point is in the circumscribed rectangle of current view. | View
| off(type:String, listener:Function):Object Remove one event listener. | View
| on(type:String, listener:Function, once:Boolean):Object Add an event listenser. | View
| removeFromParent():View Remove current view from it's parent container | View
| render(renderer:Renderer, delta:Number) The render method of current view. | View
| toString():String Get a string representing current view. | View

### Property Detail

fillAlpha:Number
The transparency of color or style inside shapes, default value is 0, readonly!
fillStyle:String
The color or style to use inside shapes, default value is 0 (the black color), readonly!
lineAlpha:Number
The alpha value (transparency) of line, default value is 1, readonly!
lineCap:String
The style of how every end point of line are drawn, value options: butt, round, square. default value is null, readonly!
lineJoin:String
The joint style of two lines. value options: miter, round, bevel. default value is null, readonly!
lineWidth:Number
The thickness of lines in space units, default value is 1, readonly!
miterLimit:Number
The miter limit ratio in space units, works only when lineJoin value is miter. default value is 10, readonly!
strokeStyle:String
The color or style to use for lines around shapes, default value is 0 (the black color), readonly!

### Constructor

Graphics(properties:Object)

parameters
properties:Object — Properties parameters of the object to create. Contains all writable properties of this class.

### Method Detail

beginBitmapFill(image:HTMLImageElement, repetition:String):Graphics
Begin an image filling pattern.

parameters
image:HTMLImageElement — The Image to fill.
repetition:String — The fill repetition style, can be one of valus:repeat, repeat-x, repeat-y, no-repeat. default valus is ''.

return
  Graphics — The Graphics Object.

beginFill(fill:String, alpha:Number):Graphics
Set how to fill shapes and the transparency.

parameters
fill:String — Filling style. this can be color, gradient or pattern.
alpha:Number — Transparency.

return
  Graphics — The Graphics Object.

beginLinearGradientFill(x0:Number, y0:Number, x1:Number, y1:Number, colors:Array, ratios:Array):Graphics
Set linear gradient filling style to draw shapes.

parameters
x0:Number — The x-coordinate value of the linear gradient start point.
y0:Number — The y-coordinate value of the linear gradient start point.
x1:Number — The x-coordinate value of the linear gradient end point.
y1:Number — The y-coordinate value of the linear gradient end point.
colors:Array — An array of CSS colors used in the linear gradient.
ratios:Array — An array of position between start point and end point, should be one-to-one to colors in the colors array. each value range between 0.0 to 1.0.

return
  Graphics — The Graphics Object.

beginPath():Graphics
Begin a new path.

return
  Graphics — The Graphics Object.

beginRadialGradientFill(x0:Number, y0:Number, r0:Number, x1:Number, y1:Number, r1:Number, colors:Array, ratios:Array):Graphics
Set radial gradient filling style to draw shapes.

parameters
x0:Number — The x-coordinate value of the radial gradient start circle.
y0:Number — The y-coordinate value of the radial gradient start circle.
r0:Number — The diameter of the radial gradient start circle.
x1:Number — The x-coordinate value of the radial gradient end circle.
y1:Number — The y-coordinate value of the radial gradient end circle.
r1:Number — The radius of the radial gradient end circle.
colors:Array — An array of CSS colors used in the radial gradient.
ratios:Array — An array of position between start circle and end circle, should be one-to-one to colors in the colors array. each value range between 0.0 to 1.0.

return
  Graphics — The Graphics Object.

bezierCurveTo(cp1x:Number, cp1y:Number, cp2x:Number, cp2y:Number, x:Number, y:Number):Graphics
Draw a Bézier curve from current point to the point on coordinate (x, y).

parameters
cp1x:Number — The x-coordinate value of the Bézier curve control point cp1.
cp1y:Number — The y-coordinate value of the Bézier curve control point cp1.
cp2x:Number — The x-coordinate value of the Bézier curve control point cp2.
cp2y:Number — The y-coordinate value of the Bézier curve control point cp2.
x:Number — The x-coordinate value.
y:Number — The y-coordinate value.

return
  Graphics — The Graphics Object.

cache(forceUpdate:Boolean)
Cache the view.

parameters
forceUpdate:Boolean — is force update cache.

clear():Graphics
Clear all draw actions and reset to the initial state.

return
  Graphics — The Graphics Object.

closePath():Graphics
Close current path.

return
  Graphics — The Graphics Object.

drawCircle(x:Number, y:Number, radius:Number):Graphics
Draw a circle.

parameters
x:Number — The x-coordinate value.
y:Number — The y-coordinate value.
radius:Number — The radius of the circle.

return
  Graphics — The Graphics Object.

drawEllipse(x:Number, y:Number, width:Number, height:Number):Graphics
Draw an ellipse.

parameters
x:Number — The x-coordinate value.
y:Number — The y-coordinate value.
width:Number — The width of the ellipse.
height:Number — The height of the ellipse.

return
  Graphics — The Graphics Object.

drawRect(x:Number, y:Number, width:Number, height:Number):Graphics
Draw a rectangle.

parameters
x:Number — The x-coordinate value.
y:Number — The y-coordinate value.
width:Number — The width of the rectangle.
height:Number — The height of the rectangle.

return
  Graphics — The Graphics Object.

drawRoundRect(x:Number, y:Number, width:Number, height:Number, cornerSize:Number):Graphics
Draw a rounded rectangle.

parameters
x:Number — The x-coordinate value.
y:Number — The y-coordinate value.
width:Number — The width of rounded rectangle.
height:Number — The height of rounded rectangle.
cornerSize:Number — The size of all rounded corners.

return
  Graphics — The Graphics Object.

drawRoundRectComplex(x:Number, y:Number, width:Number, height:Number, cornerTL:Number, cornerTR:Number, cornerBR:Number, cornerBL:Number):Graphics
Draw a complex rounded rectangle.

parameters
x:Number — The x-coordinate value.
y:Number — The y-coordinate value.
width:Number — The width of rounded rectangle.
height:Number — The height of rounded rectangle.
cornerTL:Number — The size of the rounded corner on the top-left of the rounded rectangle.
cornerTR:Number — The size of the rounded corner on the top-right of the rounded rectangle.
cornerBR:Number — The size of the rounded corner on the bottom-left of the rounded rectangle.
cornerBL:Number — The size of the rounded corner on the bottom-right of the rounded rectangle.

return
  Graphics — The Graphics Object.

drawSVGPath(pathData:String):Graphics
Draw a path from the SVG data given by parameters. Not support Arcs. Demo:

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 — The SVG path data to draw.

return
  Graphics — The Graphics Object.

endFill():Graphics
Apply and end lines-drawing and shapes-filling.

return
  Graphics — The Graphics Object.

lineStyle(thickness:Number, lineColor:String, lineAlpha:Number, lineCap:String, lineJoin:String, miterLimit:Number):Graphics
Set the lines style for drawing shapes.

parameters
thickness:Number — The thickness of lines, default value is 1.
lineColor:String — The CSS color value of lines, default value is 0 (the black color).
lineAlpha:Number — The transparency of lines, default value is 1 (fully opaque).
lineCap:String — The style of how every end point of line are drawn, value options: butt, round, square. default value is null.
lineJoin:String — The joint style of two lines. value options: miter, round, bevel. default value is null.
miterLimit:Number — The miter limit ratio in space units, works only when lineJoin value is miter. default value is 10.

return
  Graphics — The Graphics Object.

lineTo(x:Number, y:Number):Graphics
Draw a line from current point to the point on the coordinate value (x, y).

parameters
x:Number — The x-coordinate value.
y:Number — The y-coordinate value.

return
  Graphics — The Graphics Object.

moveTo(x:Number, y:Number):Graphics
Move current drawing point to a new point on coordinate values (x, y).

parameters
x:Number — The x-coordinate value.
y:Number — The y-coordinate value.

return
  Graphics — The Graphics Object.

quadraticCurveTo(cpx:Number, cpy:Number, x:Number, y:Number):Graphics
Draw a quadratic Bézier curve from current point to the point on coordinate (x, y).

parameters
cpx:Number — The x-coordinate value of the Bézier curve control point cp.
cpy:Number — The y-coordinate value of the Bézier curve control point cp.
x:Number — The x-coordinate value.
y:Number — The y-coordinate value.

return
  Graphics — The Graphics Object.

setCacheDirty(dirty:Boolean)
set the cache state diry.

parameters
dirty:Boolean — is cache dirty

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

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

see
  https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/setLineDash

updateCache()
Update the cache.