// 文档地址 https://docs.hamibot.com/
var window = floaty.rawWindow(<canvas id="canvas"/>);
window.setSize(-1, -1); // 全屏显示
window.setTouchable(false);

var paint = new Paint();
paint.setStyle(Paint.Style.STROKE); // 轮廓绘制模式
paint.setStrokeWidth(5); // 设置线宽
paint.setColor(colors.BLUE); // 设置颜色

window.canvas.on("draw", function(canvas) {
    // 绘制第一个矩形 (left, top, right, bottom)
    canvas.drawRect(100, 100, 300, 300, paint);
    
    // 绘制第二个矩形
    canvas.drawRect(400, 200, 600, 400, paint);
});

使用说明：

1. 修改canvas.drawRect参数调整矩形位置和大小（数值单位为像素）
2. 调用paint.setStyle()可切换填充(FILL)或描边(STROKE)模式
3. 通过paint.setColor()修改绘制颜色
4. setStrokeWidth()控制描边粗细
5. 需要保持脚本在前台运行才能持续显示

补充回答 1

// 文档地址 https://docs.hamibot.com/
// 创建悬浮窗布局
var window = floaty.window(
    <vertical>
        <button id="btn" text="点击绘制" layout_gravity="center"/>
        <canvas id="canvas" layout_weight="1"/>
    </vertical>
);

window.setSize(-1, -2); // 匹配屏幕宽度，包裹内容高度
window.setTouchable(false);

// 初始化画笔
var paint = new Paint();
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(5);
paint.setColor(colors.GREEN);

// 绘制状态控制
var isDrawEnabled = false;

// 按钮点击事件
window.btn.setOnClickListener(function() {
    isDrawEnabled = true;
    window.canvas.invalidate(); // 触发重绘
});

// Canvas绘制逻辑
window.canvas.on("draw", function(canvas) {
    if (isDrawEnabled) {
        // 绘制两个矩形
        canvas.drawRect(100, 100, 300, 300, paint);
        canvas.drawRect(400, 200, 600, 400, paint);
    }
});

关键点说明：

1. 使用vertical垂直布局管理按钮和canvas组件
2. 通过setOnClickListener绑定按钮点击事件
3. 使用布尔变量isDrawEnabled控制是否绘制
4. invalidate()方法触发canvas重绘
5. 在draw事件中通过条件判断执行绘制
6. 绘制完成后保持悬浮窗可见状态

扩展功能建议：

• 可添加更多按钮控制不同图形
• 绘制区域可动态获取控件bounds
• 添加动画效果
• 设置透明背景色优化显示效果

注意：实际坐标参数需要根据设备分辨率调整，可通过device.width和device.height获取屏幕尺寸进行适配。

补充回答 2

// 文档地址 https://docs.hamibot.com/
// 创建主控制窗口
var controlWindow = floaty.window(
    <vertical padding="16">
        <button id="btn" text="触发绘制" textSize="18sp"/>
    </vertical>
);

// 创建绘制窗口
var drawWindow = floaty.window(
    <canvas id="canvas"/>
);

// 设置窗口位置和大小
controlWindow.setPosition(100, 100);
controlWindow.setSize(300, 150);

drawWindow.setPosition(500, 200);
drawWindow.setSize(400, 400);

// 初始化画笔
var paint = new Paint();
paint.setStyle(Paint.Style.FILL);
paint.setColor(colors.parseColor("#FF4081"));
paint.setTextSize(36);

// 绘制控制变量
var shouldDraw = false;

// 按钮点击事件
controlWindow.btn.setOnClickListener(function() {
    shouldDraw = true;
    drawWindow.canvas.invalidate(); // 触发绘制窗口重绘
});

// 绘制逻辑
drawWindow.canvas.on("draw", function(canvas) {
    if (shouldDraw) {
        // 绘制背景
        canvas.drawColor(colors.parseColor("#E0E0E0"));
        
        // 绘制第一个矩形
        canvas.drawRect(50, 50, 150, 150, paint);
        
        // 绘制第二个矩形
        canvas.drawRect(200, 200, 350, 350, paint);
        
        // 添加文字说明
        canvas.drawText("双矩形绘制", 80, 390, paint);
    } else {
        // 初始状态显示提示
        canvas.drawColor(colors.parseColor("#F5F5F5"));
        canvas.drawText("等待绘制...", 120, 200, paint);
    }
});

实现要点说明：

1. 双窗口管理：

   • 使用两个独立的floaty.window实例
   • 分别设置不同位置setPosition()和尺寸setSize()
   • 通过独立变量controlWindow和drawWindow管理

2. 跨窗口通信：

   • 通过共享状态变量shouldDraw控制绘制开关
   • 在按钮点击时调用invalidate()触发另一个窗口重绘

3. 绘制优化：

   • 使用drawColor()设置背景色
   • 添加文字标注增强可读性
   • 支持初始状态提示信息显示

4. 资源管理：

   • 使用parseColor()确保颜色格式正确
   • 文本大小使用sp单位适配屏幕密度

扩展建议：

• 可通过drawWindow.close()动态关闭绘制窗口
• 添加动画效果可使用ValueAnimator
• 多点触控可添加on("touch", ...)事件监听
• 可通过device.getDisplayMetrics()获取屏幕尺寸进行自适应布局

注意：每个悬浮窗的生命周期需要独立管理，脚本结束时需要显式关闭所有窗口，避免残留。