安装 npm install weixin-js-sdk
引入
import wx from 'weixin-js-sdk'<template>
<div class="circle_box">
<div id="content"></div>
<img class="img_0" src="https://img.yzcdn.cn/vant/cat.jpeg" alt="">
<img @click="changeType" class="img_1" v-show="playbool" src="@/assets/decompression/pressure_audio_play.png" alt="">
<img @click="changeType" class="img_1" v-show="!playbool" src="@/assets/decompression/pressure_audio_pause.png" alt="">
<div v-show="false">
<audio ref="audio" controls @timeupdate="updateTime">
<source src="@/assets/decompression/tiankong.mp3" type="audio/mpeg">
</audio>
</div>
</div>
</template>
<script>
import wx from "weixin-js-sdk";
export default {
data(){
return{
value:'',
outColor:'',
playbool:true,
second:0,
than:''
}
},
mounted(){
this.init()
this.main()
},
methods:{
init(){
let that = this
let u = navigator.userAgent;
//ios手机
var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
if(isIOS){
this.$nextTick(() => {
this.autoPlayAudio();
})
}else{
this.$nextTick(() => {
let time = setTimeout(function () {
let audio = that.$refs.audio;
//音频总时长 秒
that.second = audio.duration;
that.than = 100/audio.duration;
that.$parent.calculationTime(audio.duration);
clearInterval(time);
}, 500)
})
}
},
autoPlayAudio() {
let ua = window.navigator.userAgent.toLowerCase();
let that = this;
let audio = this.$refs.audio;
if(ua.match(/MicroMessenger/i) == 'micromessenger'){
//微信浏览器
wx.config({
debug: false,
appId: '',
timestamp: 1,
nonceStr: '',
signature: '',
jsApiList: []
});
wx.ready(function() {
audio.play();
audio.pause();
let time = setTimeout(function () {
if(audio.duration>0){
//音频总时长 秒
that.second = audio.duration;
that.than = 100/audio.duration;
that.$parent.calculationTime(audio.duration);
}else{
that.autoPlayAudio();
}
clearInterval(time);
}, 500)
});
}else{
let time = setTimeout(function () {
if(audio.duration>0){
//音频总时长 秒
that.second = audio.duration;
that.than = 100/audio.duration;
that.$parent.calculationTime(audio.duration);
}else{
that.autoPlayAudio();
}
clearInterval(time);
}, 500)
}
},
//监测播放进度
updateTime(){
let audio = this.$refs.audio;
let time = Number(this.second)-Number(audio.currentTime);
this.$parent.calculationTime(time);
this.draw(this.than*audio.currentTime);
},
changeType(){
this.playbool = !this.playbool;
let audio = this.$refs.audio;
if(this.playbool){
//暂停
audio.pause()
}else{
audio.play()
}
},
event(dom) { //事件绑定
if(this.isMobile){
dom.addEventListener("touchstart", this.OnMouseDown.bind(this), false);
dom.addEventListener("touchmove", this.throttle(this.OnMouseMove.bind(this)), false);
dom.addEventListener("touchend", this.OnMouseUp.bind(this), false);
return
}
dom.addEventListener("mousedown", this.OnMouseDown.bind(this), false);
dom.addEventListener("mousemove", this.throttle(this.OnMouseMove.bind(this)), false);
dom.addEventListener("mouseup", this.OnMouseUp.bind(this), false);
},
OnMouseDown(evt) {
let audio = this.$refs.audio;
//暂停音频
audio.pause()
this.clearLocation(evt);
let range = 10;
let X = this.getx(evt);
let Y = this.gety(evt);
let P = this.P
let minX = P.x - this.slider - range;
let maxX = P.x + this.slider + range;
let minY = P.y - this.slider - range;
let maxY = P.y + this.slider + range;
if (minX < X && X < maxX && minY < Y && Y < maxY) { //判断鼠标是否在滑块上
this.isDown = true;
} else {
this.isDown = false;
}
},
main(){
const dom = document.getElementById("content")
const obj = {
el: dom,
startDeg:1.5 ,
endDeg: 3.5,
outColor: 'rgba(50, 50, 70, .2)',
counterclockwise: false
}
this.constructor(obj)
},
constructor(param) {
this.initParam(param)
this.draw(this.value)
},
initParam(param) {
const {
el,
startDeg = 1.5,
endDeg = 3.5,
outColor = "rgba(50, 50, 70, .2)",
innerLineWidth = 1,
outLineWidth = 5,
counterclockwise = true,
slider = 8,
color = ["#ffffff", "#ffffff"],
sliderColor = "#fff",
sliderBorderColor = "#33aaff",
value = 0,
change = (v)=> { },
textShow = true
} = param;
this.el = el;
this.width = el.offsetWidth;
this.height = el.offsetHeight;
this.center = this.width / 2
this.radius = this.width / 2 - 30; //滑动路径半径
this.initCanvas(el);
this.startDeg = startDeg;
this.endDeg = endDeg;
this.outColor = outColor;
this.innerLineWidth = innerLineWidth;
this.outLineWidth = outLineWidth;
this.counterclockwise = counterclockwise;
this.slider = slider;
this.color = color;
this.sliderColor = sliderColor;
this.sliderBorderColor = sliderBorderColor;
this.value = value;
this.textShow = textShow;
this.change = change;
this.isDown = false;
this.event(el)
},
OnMouseMove(evt) {
if (!this.isDown) return;
let evpoint = {};
evpoint.x = this.getx(evt);
evpoint.y = this.gety(evt);
let point = this.spotchangeXY(evpoint);
let deg = this.XYToDeg(point.x, point.y);
deg = this.counterclockwise ? deg : Math.PI * 2 - deg;
let val = (deg/ Math.PI - this.startDeg) / (this.endDeg - this.startDeg) * 100
if(val<0) val = 100 + val;
if(val >= 100) val = 100;
if(val <= 0) val = 0;
if(Math.abs (val - this.value) > 10) return;
//音频定位播放
let time = val/this.than;
let audio = this.$refs.audio;
audio.currentTime = time
this.animate = requestAnimationFrame(this.draw.bind(this,val));
if(this.value != Math.round(val)){
this.value = Math.round(val);
this.change(this.value)
}
},
OnMouseUp(evt) { //鼠标释放
const _this = this
cancelAnimationFrame(_this.animate);
this.isDown = false;
if(this.distance(evt)){
this.playbool = false;
let audio = this.$refs.audio;
//播放音频
audio.play()
}
},
distance(evt){
let x = this.getx(evt);
let y = this.gety(evt);
let distance = Math.abs(Math.sqrt(Math.pow(x - 135, 2) + Math.pow(y - 135, 2)));
if(0<distance && distance<130){
return true
}else{
return false
}
},
//点击定位
clearLocation(evt){
let evpoint = {};
evpoint.x = this.getx(evt);
evpoint.y = this.gety(evt);
let point = this.spotchangeXY(evpoint);
let deg = this.XYToDeg(point.x, point.y);
deg = this.counterclockwise ? deg : Math.PI * 2 - deg;
let val = (deg/ Math.PI - this.startDeg) / (this.endDeg - this.startDeg) * 100
if(val<0) val = 100 + val;
if(val >= 100) val = 100;
if(val <= 0) val = 0;
if(this.distance(evt)){
this.animate = requestAnimationFrame(this.draw.bind(this,val));
//音频定位播放
let time = val/this.than;
let audio = this.$refs.audio;
audio.currentTime = time
audio.play()
audio.pause()
if(this.value != Math.round(val)){
this.value = Math.round(val);
this.change(this.value)
}
}
},
//绘图
draw(value) {
this.ctx.clearRect(0, 0, this.width, this.width);
this.ctx.save();
let startDeg = this.counterclockwise ? Math.PI * (2 - this.startDeg) : Math.PI * this.startDeg
let endDeg = this.counterclockwise ? Math.PI * (2 - this.endDeg) : Math.PI * this.endDeg
// 绘制外侧圆弧
this.ctx.beginPath();
this.ctx.arc(this.center, this.center, this.radius, startDeg, endDeg, this.counterclockwise); // 绘制外侧圆弧
this.ctx.strokeStyle = this.outColor;
this.ctx.lineCap = "round";
this.ctx.lineWidth = this.outLineWidth;
this.ctx.stroke();
let Deg = this.valToDeg(value)
// 绘制可变圆弧
let themeColor = (typeof this.color == 'String') ? this.color : this.setLinearGradient()
this.ctx.beginPath();
this.ctx.arc(this.center, this.center, this.radius, startDeg, Deg, this.counterclockwise); // 可变圆弧
this.ctx.strokeStyle = themeColor;
this.ctx.lineCap = "round";
this.ctx.lineWidth = this.outLineWidth;
this.ctx.stroke();
// 绘制滑块
this.P = this.DegToXY(Deg)
this.ctx.beginPath();
this.ctx.moveTo(this.center, this.center);
this.ctx.arc(this.P.x, this.P.y, this.slider, 0, Math.PI * 2, false); // 绘制滑块
this.ctx.fillStyle = this.sliderColor;;
this.ctx.fill();
},
initCanvas(dom) {
this.canvas = document.createElement("canvas");
this.canvas.setAttribute("id", "dragArc");
this.canvas.setAttribute("width", this.width);
this.canvas.setAttribute("height", this.width);
dom.appendChild(this.canvas);
this.ctx = this.canvas.getContext("2d");
this.isMobile = /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent);
},
//将值转化为弧度
valToDeg(v) {
let range = this.endDeg - this.startDeg;
let val = range / 100 * v;
if(this.counterclockwise && (val !=0) ) val = 2 -val;
let startDeg = this.counterclockwise ? (2 - this.startDeg) : this.startDeg;
return (startDeg + val) * Math.PI;
},
// 弧度转化为对应坐标值
DegToXY(deg) {
let d = 2 * Math.PI - deg;
return this.respotchangeXY({
x: this.radius * Math.cos(d),
y: this.radius * Math.sin(d)
})
},
//canvas坐标转化为中心坐标
spotchangeXY(point) {
const spotchangeX = (i) => {
return i - this.center
}
const spotchangeY = (i) => {
return this.center - i
}
return {
x: spotchangeX(point.x),
y: spotchangeY(point.y)
}
},
//中心坐标转化为canvas坐标
respotchangeXY(point) {
const spotchangeX = (i) => {
return i + this.center
}
const spotchangeY = (i) => {
return this.center - i
}
return {
x: spotchangeX(point.x),
y: spotchangeY(point.y)
}
},
setLinearGradient(){
const grad = this.ctx.createLinearGradient(0,0, 0,this.width);
this.color.forEach((e, i) => {
if(i == 0){
grad.addColorStop(0, e)
}else if(i == this.color.length - 1){
grad.addColorStop(1, e)
}else{
grad.addColorStop(1/this.color.length * (i+1), e);
}
});
return grad;
},
// 将坐标点转化为弧度
XYToDeg(lx, ly) {
let adeg = Math.atan(ly / lx)
let deg;
if (lx >= 0 && ly >= 0) {
deg = adeg ;
}
if (lx <= 0 && ly >= 0) {
deg = adeg + Math.PI;
}
if (lx <= 0 && ly <= 0) {
deg = adeg + Math.PI;
}
if (lx > 0 && ly < 0) {
deg = adeg + Math.PI * 2;
}
return deg
},
//获取鼠标在canvas内坐标x
getx(ev) {
if(!this.isMobile) return ev.clientX - this.el.getBoundingClientRect().left;
if(ev.touches.length){
return ev.touches[0].pageX - this.el.getBoundingClientRect().left;
}else{
return ev.changedTouches[0].pageX - this.el.getBoundingClientRect().left;
}
},
//获取鼠标在canvas内坐标y
gety(ev) {
if(!this.isMobile) return ev.clientY - this.el.getBoundingClientRect().top;
if(ev.touches.length){
return ev.touches[0].pageY - this.el.getBoundingClientRect().top;
}else{
return ev.changedTouches[0].pageY - this.el.getBoundingClientRect().top;
}
},
//节流
throttle(func) {
let previous = 0;
return function() {
let now = Date.now();
let context = this;
let args = arguments;
if (now - previous > 10) {
func.apply(context, args);
previous = now;
}
}
},
}
}
</script>
<style scoped>
.circle_box{
position: relative;
padding-top: 130px;
top: 0;
left: 0;
width: 100%;
height: 245px;
}
#content{
position: absolute;
left: 50%;
transform: translateX(-50%);
height: 240px;
width: 270px;
}
.img_0{
position: absolute;
top: 175px;
left: 50%;
transform: translateX(-50%);
width: 180px;
height: 180px;
border-radius: 50%;
z-index: 5;
}
.img_1{
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 243px;
width: 34px;
height: 46px;
z-index: 10;
}
.posi{
position: absolute;
left: 0;
top: 10px;
z-index: 1000;
}
</style>