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

方法概览

显示继承方法
方法 定义于
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
更新缓存
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):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()
更新缓存