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