画笔

在小游戏平台,无法使用太多原生的绘制API,因此新增了一个ZGraphics类,使用三角形绘制出我们所需要的形状。目前仅支持绘制方块、线。

创建一个绘制对象

请注意,该API为了提高性能,需要提供一个精灵表对象作为渲染源来进行渲染,根据不同的精灵帧来作为画笔。

var g = new ZGraphics();
//绑定精灵表
g.beginTextureAtlas(精灵表对象);
设置画笔

画笔就是不同的精灵帧,指定精灵表里的精灵名称即可。

g.beginFrameByName(精灵帧名称)
绘制方块

支持直接绘制方块:

g.drawRect(0,0,100,100); //绘制一个在坐标0,0,宽高各100的方块
绘制线条

支持直接绘制线条:

g.drawLine(0,0,100,100); //绘制一个从坐标0,0 到坐标100,100的线条
设置线粗

该属性仅影响线条,不影响方块绘制。

g.lineSize = 10; //设置线条的像素为10像素计算。
连续画线

如果直接使用drawLine进行画线,连续画线时,两条线之间不会合并,如果需要合并,请使用以下API:

g.moveTo(0,0); //决定线的起始点
g.lineTo(100,100); //绘制到100,100坐标
g.lineTo(0,100); //绘制到0,100坐标
g.lineTo(0,0); //绘制到0,0坐标

以上方法多次调用会使多条线连接起来。

呈现画布

当绘制结束后,需要调用fillEnd接口进行呈现:

g.fillEnd();
擦除已绘制的内容

支持直接擦除已绘制的内容,但这种擦除方式不是精准擦除,而是整段个体擦除。

g.erase(100,100,10); //擦除坐标100,100,在范围内10px的绘制对象。

该方法会自动调用fillEnd接口。

导出绘图数据

可将当前绘制的内容导出Base64,该数据会经过压缩。

var base64 = g.toBase64();
通过绘图数据渲染

可将Base64导入,重新生成绘图:

var g = ZGraphics.formBase64(精灵表对象,base64);
清空所有绘制内容
g.clear();
撤销上一步操作(绘制&擦除)

撤销上一次绘制内容或擦除内容

g.withdraw();