用hamibot写一个浮动按钮，此按钮按下可以触发某个封装函数main()，这个按钮可以拖动。代码怎么写？

已存档
crv3yukjc8 · 8 天前
第 1 条补充
·
8 天前

按钮无法随意在屏幕拖动
怎么修改？

回答

Hamibot AI
1
· 8 天前

我来帮你写一个可拖动的浮动按钮，用于触发 main() 函数。

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

// 创建可拖动的浮动按钮
var floatyWin = floaty.window(
    <frame id="dragFrame" gravity="center" bg="#4CAF50" w="60" h="60" alpha="0.8">
        <button id="actionBtn" text="执行" w="*" h="*" textSize="16" textColor="#FFFFFF"/>
    </frame>
);

// 设置窗口位置（初始位置在屏幕右下角）
let screenWidth = device.width;
let screenHeight = device.height;
floatyWin.setPosition(screenWidth - 100, screenHeight - 200);

// 使窗口可拖动
floatyWin.dragFrame.setOnTouchListener(function(view, event) {
    switch(event.getAction()) {
        case event.ACTION_DOWN:
            // 记录触摸起始位置
            this.lastX = event.getRawX();
            this.lastY = event.getRawY();
            break;
        case event.ACTION_MOVE:
            // 计算移动距离
            let dx = event.getRawX() - this.lastX;
            let dy = event.getRawY() - this.lastY;
            
            // 更新窗口位置
            let x = floatyWin.getX() + dx;
            let y = floatyWin.getY() + dy;
            
            // 限制在屏幕范围内
            x = Math.max(0, Math.min(x, screenWidth - floatyWin.getWidth()));
            y = Math.max(0, Math.min(y, screenHeight - floatyWin.getHeight()));
            
            floatyWin.setPosition(x, y);
            
            // 更新最后位置
            this.lastX = event.getRawX();
            this.lastY = event.getRawY();
            break;
    }
    return true;
});

// 按钮点击事件 - 触发main函数
floatyWin.actionBtn.click(function() {
    toast("开始执行main函数");
    // 调用你的main函数
    main();
});

// 你的main函数
function main() {
    // 这里写你的主要逻辑
    toast("main函数执行中...");
    
    // 示例：显示一个对话框
    dialogs.confirm("确认执行", "是否继续执行main函数？", function(confirm) {
        if (confirm) {
            toast("继续执行");
            // 这里可以添加你的具体逻辑
            // 例如：点击某个按钮
            // click("确定");
        } else {
            toast("取消执行");
        }
    });
}

// 保持悬浮窗不被关闭
setInterval(function() {}, 1000);

代码说明：

  1. 创建浮动窗口：

    • 使用 floaty.window() 创建一个圆形按钮窗口
    • 按钮背景为绿色，透明度0.8，尺寸60x60像素

  2. 拖动功能：

    • 通过 setOnTouchListener 监听触摸事件
    • 在 ACTION_MOVE 事件中计算移动距离并更新窗口位置
    • 添加了边界检查，确保按钮不会移出屏幕

  3. 按钮功能：

    • 点击按钮会触发 main() 函数
    • 显示toast提示执行状态

  4. main函数示例：

    • 包含一个简单的确认对话框
    • 你可以在这里添加你的具体自动化逻辑

使用说明：

  1. 将代码复制到Hamibot脚本编辑器中
  2. 在 main() 函数中编写你的具体逻辑
  3. 运行脚本后会出现一个绿色浮动按钮
  4. 长按按钮可以拖动到任意位置
  5. 点击按钮会执行 main() 函数

自定义选项：

  • 修改 bg 属性改变按钮颜色
  • 修改 w 和 h 属性改变按钮大小
  • 修改 text 属性改变按钮文字
  • 修改 alpha 属性改变透明度（0-1之间）

如果你需要更复杂的功能，比如多个按钮、不同的触发方式等，我可以帮你进一步修改代码。

补充回答 1

问题在于 setOnTouchListener 的用法不正确。Hamibot的悬浮窗需要不同的方式实现拖动。我来修正代码：

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

// 创建可拖动的浮动按钮
var floatyWin = floaty.window(
    <frame id="dragFrame" gravity="center" bg="#4CAF50" w="60" h="60" alpha="0.8">
        <button id="actionBtn" text="执行" w="*" h="*" textSize="16" textColor="#FFFFFF"/>
    </frame>
);

// 设置窗口位置（初始位置在屏幕右下角）
let screenWidth = device.width;
let screenHeight = device.height;
floatyWin.setPosition(screenWidth - 100, screenHeight - 200);

// 拖动功能实现
let isDragging = false;
let lastX = 0;
let lastY = 0;

// 监听整个窗口的触摸事件
floatyWin.setTouchEvent(function(event) {
    switch(event.getAction()) {
        case event.ACTION_DOWN:
            // 记录触摸起始位置
            lastX = event.getRawX();
            lastY = event.getRawY();
            isDragging = false;
            break;
            
        case event.ACTION_MOVE:
            // 计算移动距离
            let dx = event.getRawX() - lastX;
            let dy = event.getRawY() - lastY;
            
            // 如果移动距离超过阈值，开始拖动
            if (Math.abs(dx) > 5 || Math.abs(dy) > 5) {
                isDragging = true;
                
                // 获取当前窗口位置
                let currentX = floatyWin.getX();
                let currentY = floatyWin.getY();
                
                // 计算新位置
                let newX = currentX + dx;
                let newY = currentY + dy;
                
                // 限制在屏幕范围内
                newX = Math.max(0, Math.min(newX, screenWidth - floatyWin.getWidth()));
                newY = Math.max(0, Math.min(newY, screenHeight - floatyWin.getHeight()));
                
                // 更新窗口位置
                floatyWin.setPosition(newX, newY);
                
                // 更新最后位置
                lastX = event.getRawX();
                lastY = event.getRawY();
            }
            break;
            
        case event.ACTION_UP:
            // 如果是点击而非拖动，则触发按钮点击
            if (!isDragging) {
                floatyWin.actionBtn.click();
            }
            isDragging = false;
            break;
    }
    return true;
});

// 按钮点击事件 - 触发main函数
floatyWin.actionBtn.click(function() {
    toast("开始执行main函数");
    // 调用你的main函数
    main();
});

// 你的main函数
function main() {
    // 这里写你的主要逻辑
    toast("main函数执行中...");
    
    // 示例：显示一个对话框
    dialogs.confirm("确认执行", "是否继续执行main函数？", function(confirm) {
        if (confirm) {
            toast("继续执行");
            // 这里可以添加你的具体逻辑
            // 例如：点击某个按钮
            // click("确定");
        } else {
            toast("取消执行");
        }
    });
}

// 保持悬浮窗不被关闭
setInterval(function() {}, 1000);

主要修改：

  1. 使用 setTouchEvent 替代 setOnTouchListener：

    • Hamibot悬浮窗应该使用 setTouchEvent 来监听触摸事件
    • 这是正确的API调用方式

  2. 改进拖动逻辑：

    • 添加了拖动阈值（5像素），避免轻微移动就被识别为拖动
    • 在 ACTION_MOVE 中判断是否真正在拖动
    • 在 ACTION_UP 中区分点击和拖动

  3. 智能点击判断：

    • 如果是拖动（移动距离大于5像素），则不触发点击
    • 如果是点击（移动距离小于5像素），则触发按钮点击事件

使用方法：

  1. 拖动：按住按钮并移动超过5像素距离
  2. 点击：轻轻点击按钮（移动距离小于5像素）

如果想调整拖动灵敏度：

// 修改这里的阈值（单位：像素）
let dragThreshold = 5; // 改为更大的值会更难触发拖动，更小的值更容易触发拖动

如果想改变按钮外观：

// 修改frame的属性
<frame id="dragFrame" gravity="center" bg="#FF5722" w="80" h="80" alpha="0.9" corner="40">
    <button id="actionBtn" text="开始" w="*" h="*" textSize="18" textColor="#FFFFFF"/>
</frame>

现在按钮应该可以正常拖动了。如果还有问题，请告诉我具体的现象。

ℹ️ 本回答由 AI 生成，内容仅供参考