From e42e6d3963dd08dd660aebf358f826a24b88719e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=B2=A9?= <yukino0214@163.com>
Date: Fri, 21 Nov 2025 11:14:52 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=B0=9D=E8=AF=95=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E9=83=A8=E5=88=86ios=E6=89=8B=E6=9C=BA=E4=B8=8D=E8=83=BD?=
 =?UTF-8?q?=E5=9B=9E=E6=94=BE=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../extension/timeline-canvas-wx.vue          | 81 ++++++++++---------
 1 file changed, 42 insertions(+), 39 deletions(-)

diff --git a/h5/src/components/extension/timeline-canvas-wx.vue b/h5/src/components/extension/timeline-canvas-wx.vue
index 79646d1..c5c2e49 100644
--- a/h5/src/components/extension/timeline-canvas-wx.vue
+++ b/h5/src/components/extension/timeline-canvas-wx.vue
@@ -1,9 +1,9 @@
 <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() {