Canvas.md

Canvas 是OS_Lua系统中的自定义绘制组件。

API

• drawLine
• drawPoint
• drawRect
• drawRoundRect
• drawCircle
• drawOval
• drawArc
• drawText
• drawImage
• color
• alpha
• strokeWidth
• textSize
• font
• bold
• resetPaint
• translate
• scale
• rotate
• skew
• nativeObj
• save
• restore
• clipRect
• size

a. 绘制API

drawLine

api	参数	返回参数	平台	备注
drawLine	x1: Number y1: Number x2: Number y2: Number	-	-	绘制线条。(x1,y1), (x2, y2)分别为起点终点

例:

canvas:drawLine(0,23,50,100)

drawPoint

api	参数	返回参数	平台	备注
drawPoint	x: Number y: Number	-	-	绘制点

例:

canvas:drawPoint(2,5)

drawRect

api	参数	返回参数	平台	备注
drawRect	x: Number y: Number w: Number h: Number	-	-	绘制矩形。x起点x坐标，y起点y坐标，w宽度，h高度

例:

canvas:drawRect(100,3,0,50)

drawRoundRect

api	参数	返回参数	平台	备注
drawRoundRect	x: Number y: Number w: Number h: Number rx: Number ry: Number	-	-	绘制圆角矩形 x起点x坐标 y起点y坐标 w宽度，h高度 rx为x轴圆角半径 ry为y轴圆角半径

例:

canvas:drawRoundRect(10,10,100,10010,5)

drawCircle

api	参数	返回参数	平台	备注
drawCircle	x: Number y: Number r: Number	-	-	绘制圆。(x, y)为圆心坐标，r为半径

例:

canvas:drawCircle(100,100,10)

drawOval

api	参数	返回参数	平台	备注
drawOval	x: Number y: Number rx: Number ry: Number	-	-	绘制椭圆。(x, y)为圆心坐标，rx, ry为椭圆半径

例:

canvas:drawOval(50,50,10,15)

drawArc

api	参数	返回参数	平台	备注
drawArc	x: Number y: Number w: Number h: Number startAngle: Number sweepAngle: Number useCenter: Boolean	-	-	绘制扇形 (x,y)为左上角坐标 (w,h)为扇形宽高 startAngle为开始角度 sweepAngle为覆盖角度, useCenter为是否覆盖完整扇形面积（默认为false）

例:

canvas:drawArc(10,10,50,50,30,90,ture)

drawText

api	参数	返回参数	平台	备注
drawText	text: String/StyledString/Unicode x: Number y:Number	-	-	绘制文本

例:

canvas:drawText("label",10,10)

drawImage

api	参数	返回参数	平台	备注
drawImage	image: String/Image x: Number y: Number w: Number h: Number	-	-	绘制图片，支持本地图和Image对象

例:

img=image()
img:image("http://g.alicdn.com/ju/lua/2.0.25/doc/icon.png")
canvas:drawImage(img,10,10,100,100)

b. 画笔属性API

color

api	参数	返回参数	平台	备注
color	color: Number	-	-	设置画笔颜色

例:

canvas:color(0xff0000)

alpha

api	参数	返回参数	平台	备注
alpha	alpha: Number	-	-	设置画笔透明度

例:

canvas:alpha(0.5)

##s trokeWidth

api	参数	返回参数	平台	备注
strokeWidth	w: Number	-	-	设置画笔粗细

例:

canvas:strokeWidth(3)

style

api	参数	返回参数	平台	备注
style	style: PaintStyle	-	-	设置画笔填充样式

例:

canvas:style(PaintStyle.STROKE)

PaintStyle

1	FILL  - 填充
2	STROKE  - 中空
3	EOFILL  - 中空（IOS）
4	FILLSTROKE  - 中空（IOS）
5	EOFILLSTROKE  - 中空（IOS）

textSize

api	参数	返回参数	平台	备注
textSize	size: Number	-	-	设置文本字体大小

例:

canvas:textSize(20)

font

api	参数	返回参数	平台	备注
font	name: String	-	-	设置字体名称

例:

canvas:font("JHSIconfont ")

bold

api	参数	返回参数	平台	备注
bold	bold: Boolean	-	-	设置是否粗体

例:

canvas:bold(ture)

resetPaint

api	参数	返回参数	平台	备注
resetPaint	-	-	-	重置画笔所有属性

例:

canvas:resetPaint()

c. 画布变换API

translate

api	参数	返回参数	平台	备注
translate	dx: Number dy: Number	-	-	位移变换，dx为x轴移动距离，dy为y轴移动距离

例:

canvas:translate(50,30)

scale

api	参数	返回参数	平台	备注
scale	sx: Number sy: Number	-	-	缩放变换，sx为x轴缩放比率，sy为y轴缩放比率

例:

canvas:scale(5,6)

rotate

api	参数	返回参数	平台	备注
rotate	r: Number x: Number y: Number	-	-	旋转变换，r为角度；(x,y) 坐标（可选）

例:

canvas:rotate(10,20,30)

skew

api	参数	返回参数	平台	备注
skew	x: Number y: Number	-	Android	斜切变换，xy斜切比率

例:

canvas:skew(3,4)

d. 其它API

nativeObj

api	参数	返回参数	平台	备注
nativeObj	-	native canvas	-	获取对应的native对象

例:

print(canvas:nativeObj())

save

api	参数	返回参数	平台	备注
save	-	-	-	保存当前画布状态

例:

canvas:save()

restore

api	参数	返回参数	平台	备注
restore	-	-	-	恢复当前画布状态

例:

canvas:restore()

clipRect

api	参数	返回参数	平台	备注
clipRect	left: Number top: Number right: Number bottom: Number	-	-	裁剪矩形区域

例:

canvas:clipRect(100,30,40,50)

size

api	参数	返回参数	平台	备注
size	-	w, h	-	获取画布尺寸

例:

canvas:size()