HiloJS
类列表

Graphics

继承 Graphics View 模块 hilo/view/Graphics 依赖 hilo/core/Hilo, hilo/core/Class 源码 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

方法概览

显示继承方法
方法 定义于
Graphics(properties:Object)
构造函数。
 Graphics
beginBitmapFill(image:HTMLImageElement, repetition:String)
开始一个位图填充样式。
Graphics
beginFill(fill:String, alpha:Number)
指定绘制图形的填充样式和透明度。
Graphics
beginLinearGradientFill(x0:Number, y0:Number, x1:Number, y1:Number, colors:Array, ratois:Array)
指定绘制图形的线性渐变填充样式。
Graphics
开始一个新的路径。
Graphics
beginRadialGradientFill(x0:Number, y0:Number, r0:Number, x1:Number, y1:Number, r1:Number, colors:Array, ratois:Array)
指定绘制图形的放射性渐变填充样式。
Graphics
cache(toImage:Boolean)
缓存graphics到一个canvas或image。可用来提高渲染效率。
Graphics
清除所有绘制动作并复原所有初始状态。
Graphics
关闭当前的路径。
Graphics
drawCircle(x:Number, y:Number, radius:Number)
绘制一个圆。
Graphics
drawEllipse(x:Number, y:Number, width:Number, height:Number)
绘制一个椭圆。
Graphics
drawRect(x:Number, y:Number, width:Number, height:Number)
绘制一个矩形。
Graphics
drawRoundRect(x:Number, y:Number, width:Number, height:Number, cornerSize:Number)
绘制一个圆角矩形。
Graphics
drawRoundRectComplex(x:Number, y:Number, width:Number, height:Number, cornerTL:Number, cornerTR:Number, cornerBR:Number, cornerBL:Number)
绘制一个复杂的圆角矩形。
Graphics
drawSVGPath(pathData:String)
根据参数指定的SVG数据绘制一条路径。 代码示例:

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
应用并结束笔画的绘制和图形样式的填充。
Graphics
lineStyle(thickness:Number, lineColor:String, lineAlpha:Number, lineCap:String, lineJoin:String, miterLimit:Number)
指定绘制图形的线条样式。
Graphics
toImage(type:String)
把Graphics对象转换成dataURL格式的位图。
Graphics
清除缓存。
Graphics

属性详情

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)
开始一个位图填充样式。
parameters
image:HTMLImageElement — 指定填充的Image对象。
repetition:String — 指定填充的重复设置参数。它可以是以下任意一个值：repeat, repeat-x, repeat-y, no-repeat。默认为''。
beginFill(fill:String, alpha:Number)
指定绘制图形的填充样式和透明度。
parameters
fill:String — 填充样式。可以是color、gradient或pattern。
alpha:Number — 透明度。
beginLinearGradientFill(x0:Number, y0:Number, x1:Number, y1:Number, colors:Array, ratois:Array)
指定绘制图形的线性渐变填充样式。
parameters
x0:Number — 渐变的起始点的x轴坐标。
y0:Number — 渐变的起始点的y轴坐标。
x1:Number — 渐变的结束点的x轴坐标。
y1:Number — 渐变的结束点的y轴坐标。
colors:Array — 渐变中使用的CSS颜色值数组。
ratois:Array — 渐变中开始与结束之间的位置数组。需与colors数组里的颜色值一一对应，介于0.0与1.0之间的值。
beginPath()
开始一个新的路径。
beginRadialGradientFill(x0:Number, y0:Number, r0:Number, x1:Number, y1:Number, r1:Number, colors:Array, ratois:Array)
指定绘制图形的放射性渐变填充样式。
parameters
x0:Number — 渐变的起始圆的x轴坐标。
y0:Number — 渐变的起始圆的y轴坐标。
r0:Number — 渐变的起始圆的半径。
x1:Number — 渐变的结束圆的x轴坐标。
y1:Number — 渐变的结束圆的y轴坐标。
r1:Number — 渐变的结束圆的半径。
colors:Array — 渐变中使用的CSS颜色值数组。
ratois:Array — 渐变中开始与结束之间的位置数组。需与colors数组里的颜色值一一对应，介于0.0与1.0之间的值。
cache(toImage:Boolean)
缓存graphics到一个canvas或image。可用来提高渲染效率。
parameters
toImage:Boolean — 是否缓存为Image。
clear()
清除所有绘制动作并复原所有初始状态。
closePath()
关闭当前的路径。
drawCircle(x:Number, y:Number, radius:Number)
绘制一个圆。
parameters
x:Number — x轴坐标。
y:Number — y轴坐标。
radius:Number — 圆的半径。
drawEllipse(x:Number, y:Number, width:Number, height:Number)
绘制一个椭圆。
parameters
x:Number — x轴坐标。
y:Number — y轴坐标。
width:Number — 椭圆的宽度。
height:Number — 椭圆的高度。
drawRect(x:Number, y:Number, width:Number, height:Number)
绘制一个矩形。
parameters
x:Number — x轴坐标。
y:Number — y轴坐标。
width:Number — 矩形的宽度。
height:Number — 矩形的高度。
drawRoundRect(x:Number, y:Number, width:Number, height:Number, cornerSize:Number)
绘制一个圆角矩形。
parameters
x:Number — x轴坐标。
y:Number — y轴坐标。
width:Number — 圆角矩形的宽度。
height:Number — 圆角矩形的高度。
cornerSize:Number — 圆角矩形的圆角大小。
drawRoundRectComplex(x:Number, y:Number, width:Number, height:Number, cornerTL:Number, cornerTR:Number, cornerBR:Number, cornerBL:Number)
绘制一个复杂的圆角矩形。
parameters
x:Number — x轴坐标。
y:Number — y轴坐标。
width:Number — 圆角矩形的宽度。
height:Number — 圆角矩形的高度。
cornerTL:Number — 圆角矩形的左上圆角大小。
cornerTR:Number — 圆角矩形的右上圆角大小。
cornerBR:Number — 圆角矩形的右下圆角大小。
cornerBL:Number — 圆角矩形的左下圆角大小。
drawSVGPath(pathData:String)
根据参数指定的SVG数据绘制一条路径。 代码示例:

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路径数据。
endFill()
应用并结束笔画的绘制和图形样式的填充。
lineStyle(thickness:Number, lineColor:String, lineAlpha:Number, lineCap:String, lineJoin:String, miterLimit:Number)
指定绘制图形的线条样式。
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。
toImage(type:String)
把Graphics对象转换成dataURL格式的位图。
parameters
type:String — 指定转换为DataURL格式的图片mime类型。默认为'image/png'。
uncache()
清除缓存。