安装 npm install weixin-js-sdk
引入
import wx from 'weixin-js-sdk'
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 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; } } }, } } .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; }