通过 bounds() 方法获取控件的范围后，会返回一个 Rect 对象，它包含了控件的四个坐标值：left、top、right 和 bottom。这些值可以用来计算控件的左上、左下、右上和右下角的坐标。

获取控件的四个角落坐标

// 文档地址 https://docs.hamibot.com/
var btn = text("确定").findOne();
var rect = btn.bounds();

// 左上角坐标
var topLeftX = rect.left;
var topLeftY = rect.top;

// 左下角坐标
var bottomLeftX = rect.left;
var bottomLeftY = rect.bottom;

// 右上角坐标
var topRightX = rect.right;
var topRightY = rect.top;

// 右下角坐标
var bottomRightX = rect.right;
var bottomRightY = rect.bottom;

log("左上角: (" + topLeftX + ", " + topLeftY + ")");
log("左下角: (" + bottomLeftX + ", " + bottomLeftY + ")");
log("右上角: (" + topRightX + ", " + topRightY + ")");
log("右下角: (" + bottomRightX + ", " + bottomRightY + ")");

利用 UI 绘制矩形

要利用 UI 画出这个控件的边界矩形，可以通过 floaty 创建浮窗，并使用 canvas 进行绘制：

// 文档地址 https://docs.hamibot.com/
auto.waitFor();

var btn = text("确定").findOne();
var bounds = btn.bounds();

// 获取状态栏高度并调整浮窗位置
var statusBarHeight = context.getResources().getDimensionPixelSize(
    context.getResources().getIdentifier('status_bar_height', 'dimen', 'android')
);

// 创建全屏浮窗
var window = floaty.rawWindow(<canvas id="canvas"/>);
window.setSize(-1, -1);
window.setPosition(0, -statusBarHeight);
window.setTouchable(false);

setInterval(() => {}, 1000); // 避免脚本退出

// 创建画笔
var paint = new Paint();
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(5);
paint.setColor(colors.parseColor("#FF0000")); // 红色描边

// 在 canvas 上绘制矩形
window.canvas.on("draw", function(canvas) {
    canvas.drawRect(
        bounds.left,
        bounds.top,
        bounds.right,
        bounds.bottom,
        paint
    );
});

上述代码会在屏幕上绘制一个红色矩形框，覆盖在指定控件（如“确定”按钮）的周围。该方法常用于调试目的，比如可视化某个控件的位置或边界是否正确。

补充回答 1

你可以通过 bounds() 获取控件的矩形范围，然后从中提取左上、左下、右上、右下四个角的坐标。接着使用 canvas 在该区域内绘制矩形并在其中写入文字。

获取控件的四个角落坐标

// 文档地址 https://docs.hamibot.com/
var btn = text("确定").findOne();
var rect = btn.bounds();

// 左上角
var topLeftX = rect.left;
var topLeftY = rect.top;

// 左下角
var bottomLeftX = rect.left;
var bottomLeftY = rect.bottom;

// 右上角
var topRightX = rect.right;
var topRightY = rect.top;

// 右下角
var bottomRightX = rect.right;
var bottomRightY = rect.bottom;

log("左上角: (" + topLeftX + ", " + topLeftY + ")");
log("左下角: (" + bottomLeftX + ", " + bottomLeftY + ")");
log("右上角: (" + topRightX + ", " + topRightY + ")");
log("右下角: (" + bottomRightX + ", " + bottomRightY + ")");

利用 UI 绘制矩形并添加文字

// 文档地址 https://docs.hamibot.com/
auto.waitFor();

var btn = text("确定").findOne();
var bounds = btn.bounds();

// 获取状态栏高度
var statusBarHeight = context.getResources().getDimensionPixelSize(
    context.getResources().getIdentifier('status_bar_height', 'dimen', 'android')
);

// 创建浮窗并设置全屏大小
var window = floaty.rawWindow(<canvas id="canvas"/>);
window.setSize(-1, -1);
window.setPosition(0, -statusBarHeight);
window.setTouchable(false);

setInterval(() => {}, 1000); // 防止脚本退出

// 创建画笔用于绘制矩形
var paintRect = new Paint();
paintRect.setStyle(Paint.Style.STROKE); // 描边模式
paintRect.setStrokeWidth(6);
paintRect.setColor(colors.parseColor("#00ff00")); // 绿色描边

// 创建画笔用于绘制文字
var paintText = new Paint();
paintText.setTextSize(36); // 设置字体大小
paintText.setColor(colors.parseColor("#ff0000")); // 红色文字
paintText.setAntiAlias(true); // 抗锯齿

window.canvas.on("draw", function(canvas) {
    // 绘制矩形框
    canvas.drawRect(
        bounds.left,
        bounds.top,
        bounds.right,
        bounds.bottom,
        paintRect
    );

    // 在矩形中央写入文字
    var text = "提示";
    var textWidth = paintText.measureText(text); // 文字宽度
    var textHeight = paintText.descent() - paintText.ascent(); // 文字高度

    // 计算文字居中位置
    var centerX = bounds.centerX();
    var centerY = bounds.centerY();

    canvas.drawText(text, centerX - textWidth / 2, centerY + textHeight / 2, paintText);
});

功能说明：

• bounds() 返回控件所在的矩形区域。
• 使用 canvas.drawRect() 绘制绿色矩形框在控件周围。
• 使用 canvas.drawText() 在矩形中心绘制红色文字“提示”。
• 浮窗覆盖整个屏幕，并自动适配状态栏偏移。

这段代码适用于调试界面元素，例如在自动化脚本开发时高亮某个按钮或文本框。

补充回答 2

你可以在 canvas 上绘制多个矩形，只需在 draw 事件中多次调用 canvas.drawRect() 方法，并传入不同的矩形边界和画笔即可。

示例：绘制多个矩形

// 文档地址 https://docs.hamibot.com/
auto.waitFor();

// 创建全屏浮窗
var window = floaty.rawWindow(<canvas id="canvas"/>);
window.setSize(-1, -1);
window.setTouchable(false);

setInterval(() => {}, 1000); // 防止脚本退出

// 创建画笔
var paint1 = new Paint();
paint1.setStyle(Paint.Style.STROKE);
paint1.setStrokeWidth(5);
paint1.setColor(colors.parseColor("#FF0000")); // 红色边框

var paint2 = new Paint();
paint2.setStyle(Paint.Style.FILL);
paint2.setColor(colors.parseColor("#88FF0000")); // 半透明红色填充

var paint3 = new Paint();
paint3.setStyle(Paint.Style.STROKE);
paint3.setStrokeWidth(8);
paint3.setColor(colors.parseColor("#00FF00")); // 绿色边框

// 在 canvas 上绘制多个矩形
window.canvas.on("draw", function(canvas) {
    // 矩形1：红色边框
    canvas.drawRect(100, 100, 300, 300, paint1);

    // 矩形2：半透明红色填充
    canvas.drawRect(400, 100, 600, 300, paint2);

    // 矩形3：绿色边框
    canvas.drawRect(700, 100, 900, 300, paint3);
});

效果说明：

• 绘制了三个不同样式的矩形：
  • 第一个：红色描边矩形（空心）
  • 第二个：半透明红色填充矩形（实心）
  • 第三个：绿色粗线描边矩形

你可以根据需要修改矩形的坐标、大小、颜色和样式。该方法适用于高亮多个控件区域、调试布局或制作简单的 UI 指示器。