LayaBox:在舞台上使用graphics绘制矢量图和清除，及常见错误

第一步：初始化舞台

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();             
        }