# floating-window-in-screen

**Repository Path**: yashujs/floating-window-in-screen

## Basic Information

- **Project Name**: floating-window-in-screen
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-02-18
- **Last Updated**: 2021-07-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

[toc]
---
# autojs之悬浮窗, 给我待在屏幕里面
## 使用场景:
令悬浮窗始终在屏幕之内

## 原理

在 `setOnTouchListener` 中, 监听悬浮窗坐标,

如果超出屏幕, 就把悬浮窗坐标设置为屏幕边缘

## 代码讲解

1. 悬浮窗布局

   ```js
   var window = floaty.rawWindow(
     <frame gravity="center" bg="#ff00ff">
       <button id="action" w="300dp" h="300dp">
         按钮
       </button>
     </frame>
   );
   ```

2. 保持悬浮窗不被关闭

   ```js
   setInterval(() => {}, 1000);
   ```

3. 布局完成以后, 获取悬浮窗宽高

   ```js
   ui.post(function () {
     windowWidth = window.getWidth();
     windowHeight = window.getHeight();
   }, 1000);
   ```

4. 触摸监听

   ```js
   window.action.setOnTouchListener
   ```

   触摸监听有三种情况:

   1. `ACTION_DOWN`
   2. `ACTION_MOVE`
   3. `ACTION_UP`

   我们主要处理 `ACTION_MOVE`



## `ACTION_MOVE`

1. 坐标系有两个轴: x, y
2. 悬浮窗在x轴上有以下情形
   1. 悬浮窗x < 0
   2. 0 < 悬浮窗x < 设备宽度
   3. 悬浮窗x > 设备宽度
3. 悬浮窗在y轴上与x轴情况类似
4. 所以我们一共有 3 * 3 = 9 种情况

## 超出屏幕的悬浮窗

<img src="D:\自媒体\autojs\autojs\悬浮窗跑出屏幕.jpg" style="zoom:80%;" />

## 几个坐标的意义

![](D:\自媒体\autojs\autojs\悬浮窗概念示意图.jpg)

## 关键理解: 预测未来

1. 我们判断悬浮窗超出屏幕之外, 是去计算当前的悬浮窗, 如果移动了某段距离,

   那么, 未来这个悬浮窗的某个部分, 就可能超出屏幕之外, 我们就看不见一个完整的悬浮窗了

2. 我们要计算的是, (当前悬浮窗坐标 + 未来移动的距离)  是否 超出屏幕边缘

3. 如果未来悬浮窗的坐标超出屏幕边缘, 我们就将悬浮窗置于屏幕边缘

## 关键代码

```js
let xAxisMovingDistance = event.getRawX() - x;
let yAxisMovingDistance = event.getRawY() - y;
if (windowX + xAxisMovingDistance < 0) {
  if (windowY + yAxisMovingDistance < 0) {
    window.setPosition(0, 0);
  } else if (windowY + windowHeight + yAxisMovingDistance > device.height) {
    window.setPosition(0, device.height - windowHeight);
  } else {
    window.setPosition(0, windowY + yAxisMovingDistance);
  }
} else if (windowX + xAxisMovingDistance > device.width - windowWidth) {
  if (windowY + yAxisMovingDistance < 0) {
    window.setPosition(device.width - windowWidth, 0);
  } else if (windowY + windowHeight + yAxisMovingDistance > device.height) {
    window.setPosition(device.width - windowWidth, device.height - windowHeight);
  } else {
    window.setPosition(device.width - windowWidth, windowY + yAxisMovingDistance);
  }
} else {
  if (windowY + yAxisMovingDistance < 0) {
    window.setPosition(windowX + xAxisMovingDistance, 0);
  } else if (windowY + windowHeight + yAxisMovingDistance > device.height) {
    window.setPosition(windowX + xAxisMovingDistance, device.height - windowHeight);
  } else {
    window.setPosition(windowX + xAxisMovingDistance, windowY + yAxisMovingDistance);
  }
}
```
---

## 微信公众号 AutoJsPro教程

![](officialAccount.jpg)

### QQ群



747748653