JS实现简单的操作杆旋转示例详解.docx

第

JS实现简单的操作杆旋转示例详解

JS简单的操作杆旋转实现

首先说明一下，请直接忽略背景图，这里主要实现的是杆旋转控制方向盘旋转。

鼠标移出控制区域，控制球复位

二、组成部分

创建ballOption.js文件，用以绑定控制球指定dom，并初始化相关操作

创建eleOption.js文件，用以实现一些频繁的dom操作

主要是通过鼠标滑动事件控制控制球位置更改及获取以屏幕上方向为0度的角度计算，来控制方向盘进行旋转。

1、监听鼠标滑动的事件，并判断event的point是否进入到控制球，如果进入，控制小球随着鼠标进行移动。

2、鼠标划出控制区域，控制球复位，旋转角度归零。

3、判断鼠标point点位置，通过反三角函数获取角度。

4、暴露控制球与控制区域中心形成的旋转角度，触发外界事件（方向盘旋转）

三、代码实现

1、操作控制

ballOption.js文件

classBallOption{

//添加操作domID

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=newEleOption(eleId)

//创建操作框

createOptionView(){

if(this.eleId!=undefined){

this.createOptionRangeView()

this.createOptionBallView()

//绘制操作范围

createOptionRangeView(){

letwidth=this.eleOption.getEleWidth(this.eleOption.getCurrentEle())

letheight=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){

letx=(point.x-ballOption.ballOffX)

lety=(point.y-ballOption.ballOffY)

letcurrentPoint={x,y}

if(ballOption.checkIsTouchControlBall(point)){

ballOption.eleOption.setCenter(ballO