继承 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 |
var path = 'M250 150 L150 350 L350 350 Z';
var shape = new Hilo.Graphics({width:500, height:500});
shape.drawSVGPath(path).beginFill('#0ff').endFill();