LayaAir 获取对象边界 getBounds/ getGraphicBounds

叁歲伎倆 2022-04-22 18:42 166阅读 0赞

**目录**

getGraphicBounds

图片边界

--------------------

**获取显示对象边界**

> 在相对布局中，经常需要正确地获取显示对象的边界，通常采用 getBounds/ getGraphicBounds。它们都是 [laya.display. Sprite][laya.display._Sprite] 类的方法。

# getGraphicBounds #

> /\*\*  
>  \* 返回此实例中的绘图对象（ <code>Graphics</code> ）的显示区域，不包括子对象。  
>  \* @param realSize  （可选）使用图片的真实大小，默认为false  
>  \* @return 一个 [Rectangle ][Rectangle]对象，表示获取到的显示区域(矩形区域)。  
>  \*/  
> [getGraphicBounds][](realSize?: boolean): Rectangle;

getBounds 可以满足多数多数需求，但由于其需要计算边界，不适合频繁调用。

class MyClass {
        constructor() {
            Laya.init(1136, 640, Laya.WebGL);//初始化引擎,不支持 WebGL自动切换为Canvas
            Laya.Stat.show(0, 0);/**显示性能面板 */
    
            this.drawMyRect();
            this.drawMyCircle();
            this.createText();
            this.showMyInfo();
        }
    
        //绘制矩形
        drawMyRect() {
            this.sp_rect = new Laya.Sprite();
            this.sp_rect.graphics.drawRect(150, 30, 200, 100, "#FF0000");
            Laya.stage.addChild(this.sp_rect);
        }
    
        //绘制圆形
        drawMyCircle() {
            this.sp_cicle = new Laya.Sprite();
            this.sp_cicle.graphics.drawCircle(550, 80, 30, "#f00");
            Laya.stage.addChild(this.sp_cicle);
        }
    
        //参加文本
        createText() {
            this.text_my = new Laya.Text();
            this.text_my.text = "奋六世之余烈";
            this.text_my.fontSize = 40;
            this.text_my.color = "#f00";
            this.text_my.pos(800, 80);
            Laya.stage.addChild(this.text_my);
        }
    
        //显示边界信息
        showMyInfo() {
            var label_1 = this.createLabel();
            var label_2 = this.createLabel();
            var label_3 = this.createLabel();
    
            label_1.pos(150, 200);
            label_2.pos(500, 200);
            label_3.pos(800, 200);
    
            //为三个表情绑定单击事件
            label_1.on(Laya.Event.CLICK, this, function () {
                //getGraphicBounds：返回此实例中的绘图对象（ Graphics ）的显示区域，不包括子对象，返回 laya.display.Rectangle 对象
                var rectangle = this.sp_rect.getGraphicBounds();
                //toString：当前 Rectangle 对象的水平位置 x 和垂直位置 y 以及高度 width 和宽度 height 以逗号连接成的字符串。 
                label_1.text = "x,y,width,height=" + rectangle.toString() +
                    "\nbottom=" + rectangle.bottom + ",right=" + rectangle.right;
            });
            label_2.on(Laya.Event.CLICK, this, function () {
                var rectangle = this.sp_cicle.getGraphicBounds();
                label_2.text = "x,y,width,height=" + rectangle.toString() +
                    "\nbottom=" + rectangle.bottom + ",right=" + rectangle.right;
            });
            label_3.on(Laya.Event.CLICK, this, function () {
                var rectangle = this.text_my.getGraphicBounds();
                label_3.text = "x,y,width,height=" + rectangle.toString() +
                    "\nbottom=" + rectangle.bottom + ",right=" + rectangle.right;
            });
        }
    
        createLabel() {
            var lable_info = new Laya.Label("信息展示");
            lable_info.fontSize = 20;
            lable_info.color = "#fff";
            Laya.stage.addChild(lable_info);
            return lable_info;
        }
    }
    new MyClass();//运行本类

![20190115100402887.gif][]

## 图片边界 ##

写法不同，获取的数据略有差异。不过都要注意的是必须要在图片加载完成后才能正确获取尺寸。

class MyClass {
        constructor() {
            Laya.init(1136, 640, Laya.WebGL);//初始化引擎,不支持 WebGL自动切换为Canvas
            Laya.Stat.show(0, 0);/**显示性能面板 */
    
            this.showImage();
            this.showMyInfo();
        }
    
        //显示图片
        showImage() {
            this.sp_img = new Laya.Sprite();
            var img_url = "https://cn.vuejs.org/images/logo.png?_sw-precache=cf23526f451784ff137f161b8fe18d5a";
            //加载图片资源
            Laya.loader.load(img_url, Laya.Handler.create(this, function () {
                //加载完成绘制图像
                this.sp_img.graphics.drawTexture(Laya.loader.getRes(img_url), 150, 0);
                Laya.stage.addChild(this.sp_img);
            }));
        }
    
        //显示边界信息
        showMyInfo() {
            var label_1 = this.createLabel();
            label_1.pos(500, 200);
    
            //绑定单击事件
            label_1.on(Laya.Event.CLICK, this, function () {
                //getGraphicBounds：返回此实例中的绘图对象（ Graphics ）的显示区域，不包括子对象，返回 laya.display.Rectangle 对象
                var rectangle = this.sp_img.getGraphicBounds();
                //toString：当前 Rectangle 对象的水平位置 x 和垂直位置 y 以及高度 width 和宽度 height 以逗号连接成的字符串。 
                label_1.text = "x,y,width,height=" + rectangle.toString() +
                    "\nbottom=" + rectangle.bottom + ",right=" + rectangle.right + "\n";
            });
        }
        //创建一个标签用于显示数据
        createLabel() {
            var lable_info = new Laya.Label("信息展示");
            lable_info.fontSize = 20;
            lable_info.color = "#fff";
            Laya.stage.addChild(lable_info);
            return lable_info;
        }
    }
    new MyClass();//运行本类

![20190115103823566.gif][]

class MyClass {
        constructor() {
            Laya.init(1136, 640, Laya.WebGL);//初始化引擎,不支持 WebGL自动切换为Canvas
            Laya.Stat.show(0, 0);/**显示性能面板 */
    
            this.showImage();
            this.showMyInfo();
        }
    
        //显示图片
        showImage() {
            var img_url = "https://cn.vuejs.org/images/logo.png?_sw-precache=cf23526f451784ff137f161b8fe18d5a";
            this.img = new Laya.Image(img_url);
            this.img.pos(150, 0);
            Laya.stage.addChild(this.img);
        }
    
        //显示边界信息
        showMyInfo() {
            var label_1 = this.createLabel();
            label_1.pos(500, 200);
    
            //绑定单击事件
            label_1.on(Laya.Event.CLICK, this, function () {
                //getGraphicBounds：返回此实例中的绘图对象（ Graphics ）的显示区域，不包括子对象，返回 laya.display.Rectangle 对象
                var rectangle = this.img.getGraphicBounds();
                //toString：当前 Rectangle 对象的水平位置 x 和垂直位置 y 以及高度 width 和宽度 height 以逗号连接成的字符串。 
                //Sprite 的 width 与 height 属性也可以获取精灵的宽高
                label_1.text = "x,y,width,height=" + rectangle.toString() +
                    "\nbottom=" + rectangle.bottom + ",right=" + rectangle.right + "\n" +
                    "width=" + this.img.width + ",height=" + this.img.height;
            });
        }
        //创建一个标签用于显示数据
        createLabel() {
            var lable_info = new Laya.Label("信息展示");
            lable_info.fontSize = 20;
            lable_info.color = "#fff";
            Laya.stage.addChild(lable_info);
            return lable_info;
        }
    }
    new MyClass();//运行本类

![20190115104258433.gif][]

[laya.display._Sprite]: https://layaair.ldc.layabox.com/api/?category=Core&class=laya.display.Sprite
[Rectangle]: https://layaair.ldc.layabox.com/api/?category=Core&class=laya.maths.Rectangle
[getGraphicBounds]: https://layaair.ldc.layabox.com/api/?category=Core&class=laya.display.Sprite#getGraphicBounds%28%29
[20190115100402887.gif]: /images/20220327/2b1f6f0fcd554058b012012bcbddf51c.png
[20190115103823566.gif]: /images/20220327/c75c3005a19348f8aaca4e083873c483.png
[20190115104258433.gif]: /images/20220327/9b57bd252349429693fbf4fb6812c5cb.png