第一步:初始化舞台
class Sprite_DrawShapes {
private sp: Sprite;
constructor()
{
Laya.init(500, 300, WebGL);
}
}
第二步:创建Sprite对象并且添加到舞台
class Sprite_DrawShapes {
private _sp: Sprite;
constructor()
{
this._sp = new Laya.Sprite();
Laya.init(500, 300, WebGL);
Laya.stage.addChild(this._sp);
}
}
第三步:绘制矢量图,比如直线
class Sprite_DrawShapes {
private _sp: Sprite;
constructor()
{
this._sp = new Laya.Sprite();
Laya.init(500, 300, WebGL);
Laya.stage.addChild(this._sp);
this._sp.graphics.drawLine(0,0, 100, 100, "#80817f", 3);
}
}
第四步:清除所有绘制的矢量图,并且再次绘制
class Sprite_DrawShapes {
private _sp: Sprite;
constructor()
{
this._sp = new Laya.Sprite();
Laya.init(500, 300, WebGL);
Laya.stage.addChild(this._sp);
this._sp.graphics.drawLine(0, 0, 100, 100, "#80817f", 3);
//设置一个点击按钮
this.btn.on(Laya.Event.CLICK, this, this.clickHandler);;
}
private clickHandler():void{
//清除
this.sprite.graphics.clear();
//再次绘制
this._sp.graphics.drawLine(100, 100, 100, 500, "#80817f", 3);
}
}
常见错误:
绘制多条直线的时候,多次new Sprite这个对象,想清除所有绘制的矢量图的时候,clear()只是清除最后一次绘制的直线
class Sprite_DrawShapes {
private _sp: Sprite;
constructor()
{
Laya.init(500, 300, WebGL);
//第一条直线
this._sp = new Laya.Sprite();
Laya.stage.addChild(this._sp);
this._sp.graphics.drawLine(0, 0, 100, 100, "#80817f", 3);
//第二条直线
this._sp = new Laya.Sprite();
Laya.stage.addChild(this._sp);
this._sp.graphics.drawLine(100, 100, 200, 200, "#80817f", 3);
//设置一个点击按钮
this.btn.on(Laya.Event.CLICK, this, this.clickHandler);;
}
private clickHandler():void{
//清除
this.sprite.graphics.clear();
}
发现点击按钮之后,只是清除一条直线而已
原因:new 一次相当于创建了一个内存空间,this._sp对象只是指向最后一个new的Sprite对象,所以清除的时候,只是清除最后一个对象的所有绘制命令
解决办法:new Laya.Sprite(),实例化一个Sprite对象之后,该对象可以重复使用去绘制矢量图形
绘制多条直线之后,完全清除后再绘制的代码如下:
class Sprite_DrawShapes {
private _sp: Sprite;
constructor()
{
Laya.init(500, 300, WebGL);
//第一条直线
this._sp = new Laya.Sprite();
Laya.stage.addChild(this._sp);
this._sp.graphics.drawLine(0, 0, 100, 100, "#80817f", 3);
//第二条直线
this._sp.graphics.drawLine(100, 100, 200, 200, "#80817f", 3);
//第三条直线
this._sp.graphics.drawLine(200, 200, 300, 300, "#80817f", 3);
//设置一个点击按钮
this.btn.on(Laya.Event.CLICK, this, this.clickHandler);;
}
private clickHandler():void{
//清除
this.sprite.graphics.clear();
}
网友评论