文档地址 https://docs.hamibot.com/

这个窗口是通过 Hamibot 的 floaty 和 canvas 实现的，用于在屏幕上绘制控件的边界。

下面是创建该窗口并实现功能的步骤：

1. 获取控件位置信息
   使用 text('日志').findOne().bounds() 获取目标控件的位置区域（bounds）。

2. 创建浮窗和 canvas 组件
   使用 floaty.rawWindow(<canvas id="canvas" />) 创建一个全屏浮窗，并添加 canvas 用于绘制图形。

3. 设置浮窗位置和大小
   设置浮窗大小为全屏 window.setSize(-1, -1)。
   调整浮窗位置以覆盖状态栏：window.setPosition(0, -statusBarHeight)。

4. 定义画笔样式
   创建 Paint 对象，并设置画笔颜色、宽度和样式：

   let paint = new Paint();
   paint.setStyle(Paint.Style.STROKE);
   paint.setStrokeWidth(6);
   paint['setColor(int)'](colors.parseColor('#00ff00'));
   

5. 绘制控件边界
   在 canvas.on('draw') 回调中使用 drawRect 方法绘制矩形框：

   window.canvas.on('draw', function (canvas) {
       canvas.drawRect(bounds.left, bounds.top, bounds.right, bounds.bottom, paint);
   });
   

完整代码如下：

auto.waitFor(); // 文档地址：https://docs.hamibot.com/reference/widgetsBasedAutomation
let bounds = text('日志').findOne().bounds();
log(bounds);

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

// 创建浮窗并设置布局
let window = floaty.rawWindow(<canvas id="canvas" />);
window.setSize(-1, -1); // 全屏
window.setPosition(0, -statusBarHeight);
window.setTouchable(false);
setInterval(() => {}, 1000);

// 定义画笔样式
let paint = new Paint();
paint.setStyle(Paint.Style.STROKE); // 描边模式
paint.setStrokeWidth(6); // 线宽
paint['setColor(int)'](colors.parseColor('#00ff00')); // 绿色描边

// 绘制控件边界
window.canvas.on('draw', function (canvas) {
    canvas.drawRect(bounds.left, bounds.top, bounds.right, bounds.bottom, paint);
});

以上代码会将指定控件的边界描绘在屏幕上，适合调试 UI 控件或进行视觉辅助定位。