uniapp移动端旋钮

html

				@touchmove.stop="handletouchmove">
				<image src="../../static/images/knobborder.png" mode="widthFix" class="knobborder"></image>
				<image src="../../static/images/knobback.png" mode="widthFix" class="knobback"
					:style="'transform: rotate('+lineangle+'deg);'"></image>
				<image src="../../static/images/knobline.png" mode="widthFix" class="knobline"></image>
				<image src="../../static/images/knobarrow.png" mode="widthFix" class="knobarrow"
					:style="'transform: rotate('+lineangle+'deg);'"></image>
</view>

css

			position: relative;
			.knobback,
			.knobline,
			.knobarrow {
				position: absolute;
				top: 0;
				left: 0;
			}
		}

js

	const query = uni.createSelectorQuery().in(this);
	query.select('#box').boundingClientRect(data => {
		var w = data.width / 2;
		var h = data.height / 2;
		this.px = data.left + w;// 获取容器中心点
		this.py = data.top + h;
	}).exec();
},
handletouchend(event) {},
handletouchmove(event) {
    var x = event.changedTouches[0].clientX;
	var y = event.changedTouches[0].clientY;
	this.lineangle = this.getAngle(x, y);
},
getAngle(x, y) {
	var px = this.px;
	var py = this.py;
	var x = Math.abs(px - mx);
	var y = Math.abs(py - my);
	var z = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
	var cos = y / z;
	var radina = Math.acos(cos); //用反三角函数求弧度
	var angle = 180 / (Math.PI / radina); //将弧度转换成角度
	if (mx > px && my > py) {
		//鼠标在第四象限
		angle = 180 - angle;
	}
	if (mx == px && my > py) {
		//鼠标在y轴负方向上
		angle = 180;
	}
	if (mx > px && my == py) {
		//鼠标在x轴正方向上
		angle = 90;
	}
	if (mx < px && my > py) {
		//鼠标在第三象限
		angle = 180 + angle;
	}
	if (mx < px && my == py) {
		//鼠标在x轴负方向
		angle = 270;
	}
	if (mx < px && my < py) {
		//鼠标在第二象限
		angle = 360 - angle;
	}
	return angle;
},

手指触摸的时候获取容器的中心点，之后每次移动手指获取当前触摸点的坐标，之后计算当前点与中心点的角度，把这个角度赋值给旋钮的旋转样式就可以了