Skip to content

蒋秀川 / miniProject

Go to a project
Commit e42e6d39 by 陈岩
Options

fix: 尝试修复部分ios手机不能回放的问题

1 parent e557c243
Inline Side-by-side
Showing 1 changed file with 42 additions and 39 deletions
h5/src/components/extension/timeline-canvas-wx.vue
<template>
<canvas
class="timeline-canvas"
@touchmove="touchmove"
@touchend="touchend"
@touchstart="touchstart"
@touchmove.prevent="touchmove"
@touchend.prevent="touchend"
@touchstart.prevent="touchstart"
onselectstart="return false;"
:style="`background-color: ${this.colors.background}; cursor: ${isMobile ? 'default' : 'pointer'}`"
:height="height"
......@@ -153,14 +153,21 @@ export default {
let width = this.width;
//自适应父容器宽度 this.width参数支持百分比设置
let parentWidth = this.canvas.parentElement.clientWidth;
let parentWidth = this.canvas.parentElement.getBoundingClientRect().width || this.canvas.parentElement.clientWidth;
if (!parentWidth || parentWidth <= 0) {
setTimeout(() => { this.init(); }, 50);
return;
}
if (/^(\d|[1-9]\d|100)%$/.test(this.width)) {
width = Math.floor((this.width.replace("%", "") / 100) * parentWidth);
}
//移动端像素模糊问题处理
//是由于dpr像素比造成的，扩大canvas画布的像素，使1个canvas像素和1个物理像素相等
this.dpr = window.devicePixelRatio; // 假设dpr为2
const ua = navigator.userAgent || '';
const isiOS = /iP(hone|ad|od)/.test(ua);
this.dpr = window.devicePixelRatio || 1;
if (isiOS) this.dpr = Math.min(this.dpr, 2);
// //获取css的宽高
// const { width: cssWidth, height: cssHeight } = this.canvas.getBoundingClientRect();
// // 设置图像大小
......@@ -215,7 +222,7 @@ export default {
//中间时间增加1s
this.meddleTime = moment(this.meddleTime).add(1, "s").format(this.dateFormatType + " HH:mm:ss");
let status =
this.realTimeRange[1] && new Date(this.meddleTime).getTime() >= new Date(this.realTimeRange[1]).getTime()
this.realTimeRange[1] && moment(this.meddleTime).valueOf() >= moment(this.realTimeRange[1]).valueOf()
? "end"
: "play";
this.$emit("changeTime", this.meddleTime, status);
......@@ -236,10 +243,10 @@ export default {
//移动端滑动
touchmove(e) {
if (this.markTime.length < 1) return
const rect = this.canvas.getBoundingClientRect();
let touches = e.touches;
e.offsetX = touches[0].pageX;
e.offsetY = touches[0].pageY;
e.offsetX = touches[0].clientX - rect.left;
e.offsetY = touches[0].clientY - rect.top;
//双指缩放 (在本组件上因区域的限制不适合用双指缩放手势)
if (touches.length < 2) {
this.mousemove(e);
......@@ -248,19 +255,19 @@ export default {
//滑动结束
touchend(e) {
if (this.markTime.length < 1) return
const rect = this.canvas.getBoundingClientRect();
let touches = e.changedTouches;
e.offsetX = touches[0].pageX;
e.offsetY = touches[0].pageY; //pc 与m的值是否相同
e.offsetX = touches[0].clientX - rect.left;
e.offsetY = touches[0].clientY - rect.top;
this.mouseup(e);
},
//滑动开始
touchstart(e) {
if (this.markTime.length < 1) return
const rect = this.canvas.getBoundingClientRect();
let touches = e.touches;
e.offsetX = touches[0].pageX;
e.offsetY = touches[0].pageY;
e.offsetX = touches[0].clientX - rect.left;
e.offsetY = touches[0].clientY - rect.top;
//双指事件(在本组件上因区域的限制不适合用双指缩放手势)
if (touches.length >= 2) {
e.preventDefault();
......@@ -333,16 +340,13 @@ export default {
let offset = this.mouseDownPosition - e.offsetX;
// console.log(offset)
// 点击时的中间时间 + 坐标距离差转换后的时间 = 移动后的中间时间
let date = new Date(this.mouseDownMeddleTime).getTime() + offset * this.px_second * 1000;
let date = moment(this.mouseDownMeddleTime).valueOf() + offset * this.px_second * 1000;
date = this.boundary_time(date);
this.meddleTime = moment(date).format(this.dateFormatType + " HH:mm:ss");
this.$emit("mouseMove", this.meddleTime);
},
drow() {
//重置高宽清空画布
this.canvas.width = this.canvas.width;
this.canvas.height = this.canvas.height;
this.ctx.scale(this.dpr, this.dpr);
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
this.drowMark();
this.drowScaleLine();
this.drowMeddleLine(this.meddleTime);
......@@ -374,7 +378,7 @@ export default {
// this.ctx.fillStyle = "rgba(69, 72, 76, 0.5)";
// this.ctx.fillRect(0, 0, this.canvasWidth, 20);
// 画第一个刻度线
let time = new Date(this.getFirstLineTime()).getTime() - this.firstTime;
let time = moment(this.getFirstLineTime(), this.dateFormatType + " HH:mm").valueOf() - this.firstTime;
//几个像素点后画第一个刻度
let p = time / 1000 / this.px_second;
// 每条线之间的间隔 scaleLine_minute来确定每个格代表多长时间
......@@ -382,8 +386,8 @@ export default {
for (let i = p; i <= (this.canvasWidth + 1); i += line_px) {
let date = this.firstTime + i * this.px_second * 1000;
if (
(this.realTimeRange[0] && date < new Date(this.realTimeRange[0]).getTime()) ||
(this.realTimeRange[1] && date > (new Date(this.realTimeRange[1]).getTime() + 1000))
(this.realTimeRange[0] && date < moment(this.realTimeRange[0]).valueOf()) ||
(this.realTimeRange[1] && date > (moment(this.realTimeRange[1]).valueOf() + 1000))
) {
continue;
}
......@@ -415,11 +419,10 @@ export default {
let time;
if (this.realTimeRange[0] && this.realTimeRange[1]) {
time = moment(
(new Date(this.realTimeRange[0]).getTime() + new Date(this.realTimeRange[1]).getTime()) / 2
(moment(this.realTimeRange[0]).valueOf() + moment(this.realTimeRange[1]).valueOf()) / 2
).format(this.dateFormatType + " HH:mm:ss");
}
//设置默认中间时间（优先级：startMeddleTime参数指定>按有可活动时间范围计算>当前时间）
this.meddleTime = this.startMeddleTime || time || moment(new Date()).format(this.dateFormatType + " HH:mm:ss");
this.meddleTime = this.startMeddleTime || time || moment().format(this.dateFormatType + " HH:mm:ss");
},
//获取刻度上的第一个时间
getFirstLineTime() {
......@@ -505,24 +508,24 @@ export default {
this.markTime.forEach((item) => {
//标签所有范围超出时间区域（realTimeRange）就不渲染
if (
(this.realTimeRange[0] && new Date(item.endTime).getTime() < new Date(this.realTimeRange[0]).getTime()) ||
(this.realTimeRange[1] && new Date(item.beginTime).getTime() > new Date(this.realTimeRange[1]).getTime())
(this.realTimeRange[0] && moment(item.endTime).valueOf() < moment(this.realTimeRange[0]).valueOf()) ||
(this.realTimeRange[1] && moment(item.beginTime).valueOf() > moment(this.realTimeRange[1]).valueOf())
) {
return;
}
this.ctx.fillStyle = item.bgColor;
// 标签起点超时间效区域realTimeRange[0]就用realTimeRange[0]做为起点时间
let beginTime =
this.realTimeRange[0] && new Date(item.beginTime).getTime() < new Date(this.realTimeRange[0]).getTime()
this.realTimeRange[0] && moment(item.beginTime).valueOf() < moment(this.realTimeRange[0]).valueOf()
? this.realTimeRange[0]
: item.beginTime;
// 标签终点超时间效区域realTimeRange[1]就用realTimeRange[1]做为终点时间
let endTime =
this.realTimeRange[1] && new Date(item.endTime).getTime() > new Date(this.realTimeRange[1]).getTime()
this.realTimeRange[1] && moment(item.endTime).valueOf() > moment(this.realTimeRange[1]).valueOf()
? this.realTimeRange[1]
: item.endTime;
let sx = (new Date(beginTime).getTime() - this.firstTime) / 1000 / this.px_second;
let ex = (new Date(endTime).getTime() - this.firstTime) / 1000 / this.px_second;
let sx = (moment(beginTime).valueOf() - this.firstTime) / 1000 / this.px_second;
let ex = (moment(endTime).valueOf() - this.firstTime) / 1000 / this.px_second;
// !!! 控制录音条的高度
this.ctx.fillRect(sx, 0, ex - sx, 8);
});
......@@ -536,12 +539,12 @@ export default {
//超出有效时间范围，返回边界值
boundary_time(date) {
//超出起点有效区域
if (this.realTimeRange[0] && date < new Date(this.realTimeRange[0]).getTime()) {
return new Date(this.realTimeRange[0]).getTime();
if (this.realTimeRange[0] && date < moment(this.realTimeRange[0]).valueOf()) {
return moment(this.realTimeRange[0]).valueOf();
}
// 超出端点有效区域
else if (this.realTimeRange[1] && date > new Date(this.realTimeRange[1]).getTime()) {
return new Date(this.realTimeRange[1]).getTime();
else if (this.realTimeRange[1] && date > moment(this.realTimeRange[1]).valueOf()) {
return moment(this.realTimeRange[1]).valueOf();
} else {
return date;
}
......@@ -550,8 +553,8 @@ export default {
getMark(date) {
return this.markTime.find(
(item) =>
new Date(item.beginTime).getTime() < new Date(date).getTime() &&
new Date(date).getTime() < new Date(item.endTime).getTime()
moment(item.beginTime).valueOf() < moment(date).valueOf() &&
moment(date).valueOf() < moment(item.endTime).valueOf()
);
},
/**
......@@ -585,7 +588,7 @@ export default {
// },
firstTime() {
return new Date(this.meddleTime).getTime() - ((this.px_second * this.canvasWidth) / 2) * 1000;
return moment(this.meddleTime, this.dateFormatType + " HH:mm:ss").valueOf() - ((this.px_second * this.canvasWidth) / 2) * 1000;
},
// 每个像素点对应多少秒（像素转时间和刻度）
px_second() {
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!