# AAA-controllerBall

**Repository Path**: wwwKit/aaa-controller-ball

## Basic Information

- **Project Name**: AAA-controllerBall
- **Description**: vue,控制球,鼠标控制
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2021-03-25
- **Last Updated**: 2021-03-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# AAA-controllerBall

> ## 介绍

vue,控制球,鼠标控制

> ## 预览

![预览](/controllerBall.jpg "啊啊啊啊啊啊啊啊啊艹!!")

> ## 技术总结

1. 一共有 5 版,最后一版才是成功的
2. js 获取元素信息

```JavaScript
obj.clientWidth //获取元素的宽度（width+padding）
obj.clientHeight //元素的高度
obj.offsetLeft //元素相对于父元素的left
obj.offsetTop //元素相对于父元素的top
obj.offsetWidth //元素的宽度(width+padding+border)
obj.offsetHeight //元素的高度

//最重要!!!!
 function getTop(e){
   var offset=e.offsetTop;
   if(e.offsetParent!=null) offset+=getTop(e.offsetParent);
   return offset;
 }
 function getLeft(e){
   var offset=e.offsetLeft;
   if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);
   return offset;
 }
```

3. 获取鼠标位置

```JavaScript
clientX	以浏览器窗口左上顶角为原点，定位 x 轴坐标	所有浏览器，不兼容 Safari
clientY	以浏览器窗口左上顶角为原点，定位 y 轴坐标	所有浏览器，不兼容 Safari
offsetX	以当前事件的目标对象左上顶角为原点，定位 x 轴坐标	所有浏览器，不兼容 Mozilla
offsetY	以当前事件的目标对象左上顶角为原点，定位 y 轴坐标	所有浏览器，不兼容 Mozilla
pageX	以 document 对象（即文档窗口）左上顶角为原点，定位 x 轴坐标	所有浏览器，不兼容 IE
pageY	以 document 对象（即文档窗口）左上顶角为原点，定位 y 轴坐标	所有浏览器，不兼容 IE
screenX	计算机屏幕左上顶角为原点，定位 x 轴坐标	所有浏览器
screenY	计算机屏幕左上顶角为原点，定位 y 轴坐标	所有浏览器
layerX	最近的绝对定位的父元素（如果没有，则为 document 对象）左上顶角为元素，定位 x 轴坐标	Mozilla 和 Safari
layerY	最近的绝对定位的父元素（如果没有，则为 document 对象）左上顶角为元素，定位 y 轴坐标	Mozilla 和 Safari
```

4. 相对于 document 窗口创建坐标系(抽象),使用`pageX()`获取鼠标坐标(<font color='red'> 重要</font>)

5. Dom 结构

- #controllerContainer,容器,fixed 定位
- #controllerBg,背景,中心坐标不变,参考用
- #controllerBall,ball
- bg 和 ball 是同级,不是嵌套(其实用 pageX,也可以写成嵌套的样子,懒得改了)

6. ball

- `:style="{ top: top + 'px', left: left + 'px' }"`style 绑定内联样式
- 定义计算属性,根据 ball 中心位置,fixed 容器,ball 半径,生成

7. mounted()
   获取 bgDom,ballDom,fixedDom 位置及大小供上步计算属性用
8. `getTop() getLeft()`获取元素相对于 document 窗口位置,不管被嵌套几层
9. `mouseDown() mouseUp() mouseMove()`鼠标事件控制
10. `mouseMove()`

- 获取圆心坐标 O1
- 获取鼠标坐标 O2
- 获取判断 ball 沿 bg 边缘滑动的边界值 d
- 计算 O1-O2 距离 l
- 使用 mdn js 动画的 api`requestAnimationFrame`
- 如果 l >= d,ball 需要贴边滑动
- 如果 l < d,ball 在 bg 内移动