美文网首页
LayaBox:在舞台上使用graphics绘制矢量图和清除,及

LayaBox:在舞台上使用graphics绘制矢量图和清除,及

作者: 一眼就认出你 | 来源:发表于2018-09-27 21:22 被阅读0次

    第一步:初始化舞台

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

    相关文章

      网友评论

          本文标题:LayaBox:在舞台上使用graphics绘制矢量图和清除,及

          本文链接:https://www.haomeiwen.com/subject/kpyyoftx.html