1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

class BallOption{

    //添加操作dom ID

    eleId

    //el操作对象

    eleOption

    //控制球对象

    ball

    //控制球尺寸

    ballWidth

    ballHeight

    ballOffX

    ballOffY

    //是否触碰过控制球

    isTouchedBall = false

    //控制区域

    optionRangeView

    optionRangeViewCenterPoint

    //上一次角度

    lastDeg

    //角度回调

    angleCallBack

    //初始化操作

    constructor(eleId,angleCallBack){

        this.eleId = eleId

        this.angleCallBack = angleCallBack

        this.eleOption = new EleOption(eleId)

    }

    //创建操作框

    createOptionView(){

        if(this.eleId != undefined){

            this.createOptionRangeView()

            this.createOptionBallView()

        }

    }

    //绘制操作范围

    createOptionRangeView(){

        let width = this.eleOption.getEleWidth(this.eleOption.getCurrentEle())

        let height = this.eleOption.getEleHeight(this.eleOption.getCurrentEle())

        this.optionRangeView = this.eleOption.createEl('optionRangeViewEl')

        this.eleOption.addSubEl(this.eleOption.getCurrentEle(),this.optionRangeView)

        this.eleOption.setBackgroundColor(this.optionRangeView,'rgb(248,248,248)')

        this.eleOption.setWidth(this.optionRangeView,width)

        this.eleOption.setHeight(this.optionRangeView,height)

        this.eleOption.setCircle(this.optionRangeView)

        //添加拖拽事件

        this.eleOption.addMoveEvent(optionRangeViewEl,this,this.makeBallFollowScroll,this.resetBall)

    }

    //控制球随鼠标滚

    makeBallFollowScroll(point,ballOption){

        let x = (point.x - ballOption.ballOffX)

        let y = (point.y - ballOption.ballOffY)

        let currentPoint = {x,y}

        if(ballOption.checkIsTouchControlBall(point)){

            ballOption.eleOption.setCenter(ballOption.ball,currentPoint)

            ballOption.getCurrentAngle(point)

        }

    }

    //检测是否碰触过控制球

    checkIsTouchControlBall(point){

        if(!this.isTouchedBall){

            let isTouchBall = (

                point.x > this.optionRangeViewCenterPoint.x - this.ballWidth &&

                point.x < this.optionRangeViewCenterPoint.x + this.ballWidth &&

                point.y > this.optionRangeViewCenterPoint.y - this.ballHeight &&

                point.y < this.optionRangeViewCenterPoint.y + this.ballHeight

            )

            if(isTouchBall){

                this.isTouchedBall = true

                this.eleOption.setTransparency(this.ball,100)

            }

        }

        return this.isTouchedBall

    }

    //鼠标移出事件

    resetBall(ballOption){

        ballOption.isTouchedBall = false

        ballOption.eleOption.setCenter(ballOption.ball,ballOption.optionRangeViewCenterPoint)

        ballOption.eleOption.setTransparency(ballOption.ball,40)

        if(ballOption.angleCallBack){

            ballOption.lastDeg = 0

            ballOption.angleCallBack(ballOption.lastDeg)

        }

    }

    //计算角度

    getCurrentAngle(point){

        let addX = (point.x - this.eleOption.getEleWidth(this.optionRangeView) / 2.0)

        let addY = (point.y - this.eleOption.getEleHeight(this.optionRangeView) / 2.0)

        if(addY != 0){

            let tan = addX / addY

            let angle = Math.atan(tan)

            this.lastDeg = (angle / Math.PI) * 180

            if(addX <= 0 && addY < 0){

                this.lastDeg = this.lastDeg

            } else if(addX <= 0 && addY > 0){

                this.lastDeg = (180 - Math.abs(this.lastDeg))

            } else if(addX >= 0 && addY > 0){

                this.lastDeg = 180 + Math.abs(this.lastDeg)

            } else if(addX >= 0 && addY < 0){

                this.lastDeg = (360 - Math.abs(this.lastDeg))

            }

        }

        if(this.angleCallBack){

            this.angleCallBack(360 - this.lastDeg)

        }

    }

    //绘制球滚动

    createOptionBallView(){

        let scale = 3.2

        this.ballWidth = this.eleOption.getEleWidth(this.eleOption.getCurrentEle()) / scale

        this.ballHeight = this.eleOption.getEleHeight(this.eleOption.getCurrentEle()) / scale

        this.ballOffX = this.ballWidth / 2.0

        this.ballOffY = this.ballHeight / 2.0

        this.ball = this.eleOption.createEl('optionBallViewEl')

        this.eleOption.addSubEl(this.eleOption.getCurrentEle(),this.ball)

        this.eleOption.setBackgroundColor(this.ball,'black')

        this.eleOption.setWidth(this.ball,this.ballWidth)

        this.eleOption.setHeight(this.ball,this.ballHeight)

        this.eleOption.setCircle(this.ball)

        this.eleOption.setSupCenter(this.ball)

        this.eleOption.cancleUserInreface(this.ball)

        this.eleOption.setTransparency(this.ball,40)

        //保存中心点坐标

        this.optionRangeViewCenterPoint = this.eleOption.getCenterPoint({offX:this.ballOffX,offY:this.ballOffY})

    }

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

class EleOption{

    //添加操作dom ID

    eleId

    constructor(eleId){

        this.eleId = eleId

    }

    //获取当前关联的el

    getCurrentEle(){

        return document.getElementById(this.eleId)

    }

    //获取el宽度

    getEleWidth(el){

        return el.offsetWidth

    }

    //获取el高度

    getEleHeight(el){

        return el.offsetHeight

    }

    //设置背景颜色

    setBackgroundColor(el,color){

        el.style.backgroundColor = color

    }

    //设置宽度

    setWidth(el,w){

        el.style.width = w + 'px'

    }

    //设置高度

    setHeight(el,h){

        el.style.height = h + 'px'

    }

    //设置圆角

    setCircle(el){

        el.style.borderRadius = (this.getEleWidth(el) / 2.0 )+ 'px'

    }

    //设置绝对定位

    setAbsolutePosition(el){

        el.style.position = 'absolute'

    }

    //设置透明度

    setTransparency(el,alpha){

        el.style.opacity = alpha / 100

    }

    //设置为父el中心位置

    setSupCenter(el){

        if(el.style.position != 'absolute'){

            this.setAbsolutePosition(el)

            let superElWidth = this.getEleWidth(this.getSuperEl(el))

            let superElHeight = this.getEleHeight(this.getSuperEl(el))

            let width = this.getEleWidth(el)

            let height = this.getEleHeight(el)

            el.style.left = ((superElWidth - width) / 2.0) + 'px'

            el.style.top = ((superElHeight - height) / 2.0) + 'px'

        }

    }

    //设置中心位置

    setCenter(el,point){

        if(el.style.position != 'absolute'){

            this.setAbsolutePosition(el)

        }

        el.style.left = point.x + 'px'

        el.style.top = point.y + 'px'

    }

    //获取父类el

    getSuperEl(el){

        return el.parentNode

    }

    //获取el

    getElById(elId){

        return document.getElementById(elId)

    }

    //创建el

    createEl(elId){

        let el = document.createElement('div')

        if(elId){

            el.setAttribute('id',elId)

        }

        return el

    }

    //添加子el

    addSubEl(superEl,subEl){

        superEl.appendChild(subEl);

    }

    //取消交互

    cancleUserInreface(el){

        el.style.pointerEvents = 'none'

    }

    //添加move事件

    addMoveEvent(el,ballOption,mcb,emcb){

        //鼠标进入移动事件

        el.onmousemove = (event)=>{

            mcb(this.getMoveEventPoint(event,el),ballOption)

        }

        //鼠标移出事件

        el.onmouseout = (_)=>{

            emcb(ballOption)

        }

    }

    //move事件监听

    getMoveEventPoint(event,el){

        let x = event.clientX - this.getSuperEl(el).offsetLeft

        let y = event.clientY - this.getSuperEl(el).offsetTop

        return {x,y}

    }

    //获取中心点

    getCenterPoint(off){

        let x = this.getSuperEl(this.getCurrentEle()).offsetLeft + (this.getEleWidth(this.getCurrentEle()) / 2.0) - off.offX

        let y = this.getSuperEl(this.getCurrentEle()).offsetTop + (this.getEleHeight(this.getCurrentEle()) / 2.0) - off.offY

        return {x,y}

    }

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<script src="../js/eleOption.js"></script>

<script src="../js/ballOption.js"></script>

<body>

<div id="optionDiv"></div>

<div id="car">

    <img src="../source/car.jpeg" alt="">

</div>

<div id="target">

    <img src="../source/circle.jpeg" alt="">

</div>

</body>

<script>

//初始化控制操作类即可

let ballOption = new BallOption('optionDiv',(angle)=>{

    let targetEl = document.getElementById('target')

    targetEl.style.transform = 'rotate(' + angle + 'deg)'

})

ballOption.createOptionView()

</script>