class BallOption{
    //添加操作dom ID
    eleId
    //el操作對(duì)象
    eleOption
    //控制球?qū)ο?
    ball
    //控制球尺寸
    ballWidth
    ballHeight
    ballOffX
    ballOffY
    //是否觸碰過(guò)控制球
    isTouchedBall = false
    //控制區(qū)域
    optionRangeView
    optionRangeViewCenterPoint
    //上一次角度
    lastDeg
    //角度回調(diào)
    angleCallBack
    //初始化操作
    constructor(eleId,angleCallBack){
        this.eleId = eleId
        this.angleCallBack = angleCallBack
        this.eleOption = new EleOption(eleId)
    }
    //創(chuàng)建操作框
    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)
    }
    //控制球隨鼠標(biāo)滾
    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)
        }
    }
    //檢測(cè)是否碰觸過(guò)控制球
    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
    }
    //鼠標(biāo)移出事件
    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)
        }
    }
    //計(jì)算角度
    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)
        }
    }
    //繪制球滾動(dòng)
    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)
        //保存中心點(diǎn)坐標(biāo)
        this.optionRangeViewCenterPoint = this.eleOption.getCenterPoint({offX:this.ballOffX,offY:this.ballOffY})
    }
}

class EleOption{
    //添加操作dom ID
    eleId
    constructor(eleId){
        this.eleId = eleId
    }
    //獲取當(dāng)前關(guān)聯(lián)的el
    getCurrentEle(){
        return document.getElementById(this.eleId)
    }
    //獲取el寬度
    getEleWidth(el){
        return el.offsetWidth
    }
    //獲取el高度
    getEleHeight(el){
        return el.offsetHeight
    }
    //設(shè)置背景顏色
    setBackgroundColor(el,color){
        el.style.backgroundColor = color
    }
    //設(shè)置寬度
    setWidth(el,w){
        el.style.width = w + 'px'
    }
    //設(shè)置高度
    setHeight(el,h){
        el.style.height = h + 'px'
    }
    //設(shè)置圓角
    setCircle(el){
        el.style.borderRadius = (this.getEleWidth(el) / 2.0 )+ 'px'
    }
    //設(shè)置絕對(duì)定位
    setAbsolutePosition(el){
        el.style.position = 'absolute'
    }
    //設(shè)置透明度
    setTransparency(el,alpha){
        el.style.opacity = alpha / 100
    }
    //設(shè)置為父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'
        }
    }
    //設(shè)置中心位置
    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)
    }
    //創(chuàng)建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){
        //鼠標(biāo)進(jìn)入移動(dòng)事件
        el.onmousemove = (event)=>{
            mcb(this.getMoveEventPoint(event,el),ballOption)
        }
        //鼠標(biāo)移出事件
        el.onmouseout = (_)=>{
            emcb(ballOption)
        }
    }
    //move事件監(jiān)聽(tīng)
    getMoveEventPoint(event,el){
        let x = event.clientX - this.getSuperEl(el).offsetLeft
        let y = event.clientY - this.getSuperEl(el).offsetTop
        return {x,y}
    }
    //獲取中心點(diǎn)
    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}
    }
}

<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>