golang用wails开发类似360的悬浮球

在上一节中，我们已经创建了悬浮球的基本框架，并实现了悬浮球的显示和隐藏。在这一节中，我们将继续实现悬浮球的拖拽功能。

首先，我们需要在floatingBall.go中添加一个新的方法来处理拖拽事件：




// floatingBall.go
 
package main
 
import (
    "github.com/wailsapp/wails"
)
 
type FloatingBall struct {
    runtime *wails.Runtime
    show    bool
    x       int
    y       int
}
 
// ... 省略其他代码 ...
 
// Drag 处理悬浮球的拖拽逻辑
func (b *FloatingBall) Drag(data string) {
    // 将data转换为DragInfo结构体
    var info DragInfo
    err := json.Unmarshal([]byte(data), &info)
    if err != nil {
        b.runtime.LogError("解析拖拽数据失败: ", err)
        return
    }
 
    // 更新悬浮球位置
    b.x = info.X
    b.y = info.Y
    b.runtime.Events.Emit("updatePosition", map[string]interface{}{
        "x": b.x,
        "y": b.y,
    })
}
 
// ... 省略其他代码 ...

然后，我们需要在前端代码中监听拖拽事件，并在拖拽结束后更新悬浮球位置：




<!-- renderer/main/main.html -->
 
<!DOCTYPE html>
<html>
<head>
  <!-- ... 省略其他代码 ... -->
</head>
<body>
  <!-- ... 省略其他代码 ... -->
 
  <script>
    // ... 省略其他代码 ...
 
    window.wails.Events.on('updatePosition', (payload) => {
      ball.style.left = payload.x + 'px';
      ball.style.top = payload.y + 'px';
    });
 
    ball.addEventListener('mousedown', (e) => {
      isDragging = true;
      offsetX = e.clientX - parseInt(ball.style.left);
      offsetY = e.clientY - parseInt(ball.style.top);
    });
 
    window.addEventListener('mousemove', (e) => {
      if (isDragging) {
        const x = e.clientX - offsetX;
        const y = e.clientY - offsetY;
        ball.style.left = x + 'px';
        ball.style.top = y + 'px';
        window.wails.Events.emit('drag', JSON.stringify({ x, y }));
      }
    });
 
    window.addEventListener('mouseup', () => {
      isDragging = false;
    });
 
    // ... 省略其他代码 ...
  </script>
</body>
</html>

在上面的代码中，我们添加了updatePosition事件的监听，用于更新悬浮球的位置。我们还为悬浮球添加了mousedown、mousemove和mouseup事件监听器，以实现拖拽功能。当用户拖动悬浮球时，我们发送drag事件给后端，并在前端更新悬浮球的位置。

这样，悬浮球的拖拽功能就完成了。你可以运行你的应用，并试着拖动悬浮球看看效果。

golang用wails开发类似360的悬浮球

评论已关闭

推荐阅读