调整线条显示效果

src/views/ECG/ECGhtml.vue

@@ -168,8 +168,17 @@ function lineTo(x, y, x1, y1, type) {
   ctx.value.beginPath()
   ctx.value.moveTo(x, y)
   ctx.value.lineTo(x1, y1)
-  ctx.value.strokeStyle = 'black'
-  ctx.value.lineWidth = 1
+  ctx.value.strokeStyle = '#000000'
+  ctx.value.lineWidth = 0.8 // 减小线宽使线条更细腻
+  ctx.value.lineCap = 'round' // 使线条端点圆滑
+  ctx.value.lineJoin = 'round' // 使线条连接处圆滑
+  ctx.value.imageSmoothingEnabled = true // 启用图像平滑
+  ctx.value.imageSmoothingQuality = 'high' // 设置最高质量的平滑
+  // 添加抗锯齿
+  ctx.value.shadowBlur = 0.5 // 添加轻微模糊效果
+  ctx.value.shadowColor = '#000000'
+  // 设置全局透明度让线条看起来更柔和
+  ctx.value.globalAlpha = 0.8
   ctx.value.stroke()
 
   // 计算并绘制距离文本
@@ -459,7 +468,7 @@ const lead_name = ['I', 'II', 'III', 'aVR', 'aVL', 'aVF']
 
 const rlead_name = ['V1', 'V2', 'V3', 'V4', 'V5', 'V6']
 
-//将读取到的文<EFBFBD><EFBFBD><EFBFBD>转换成数组
+//将读取到的文本转换成数组
 function handleFileChange() {
   const json = JSON.parse(text.value)
 
@@ -584,6 +593,9 @@ function begin(c_canvas, beatArray) {
   const ctx = c_canvas.getContext('2d')
   ctx.globalAlpha = 1
   ctx.strokeStyle = '#000000'
+  ctx.lineWidth = 1.0
+  ctx.lineCap = 'round'
+  ctx.lineJoin = 'round'
   let offset = -50
   const spacing = heightoff.value
   beatArray.forEach((dataArray, index) => {
@@ -622,6 +634,9 @@ function beginr(c_canvas, beatArray) {
   const ctx = c_canvas.getContext('2d')
   ctx.globalAlpha = 1
   ctx.strokeStyle = '#000000'
+  ctx.lineWidth = 1.0
+  ctx.lineCap = 'round'
+  ctx.lineJoin = 'round'
   let offset = -50
   const spacing = heightoff.value
   beatArray.forEach((dataArray, index) => {
@@ -687,37 +702,48 @@ function drawMultipleLinesr(c_canvas, beatArrays) {
 //画心电图线
 function drawLine1(c_canvas, beatArray, offset, index) {
   const ctx = c_canvas.getContext('2d')
-  ctx.strokeStyle = '#030101'
-  ctx.lineWidth = 1
+  
+  // 优化设置
+  ctx.globalAlpha = 1
+  ctx.strokeStyle = '#000000'
+  ctx.lineWidth = 1.0
+  ctx.lineCap = 'round'
+  ctx.lineJoin = 'round'
+  
+  // 开始绘制前清除子路径
   ctx.beginPath()
-  if (index <= 5) {
+  
+  // 使用优化的绘制方法
   if (beatArray.length > 0) {
     const firstX = 0
     const firstY = (heightoff.value-50) - beatArray[0] * infoParams.lineratio + offset
     ctx.moveTo(firstX, firstY)
-      for (let i = 0; i < beatArray.length - 1; i++) {
-        const x2 = (0 + (i + 1) / 10) * infoParams.suduratio
-        const y2 = (heightoff.value-50) - beatArray[i + 1] * infoParams.lineratio + offset
-        ctx.lineTo(x2, y2)
+    
+    // 使用步进方式减少绘制点数
+    const step = Math.max(1, Math.floor(beatArray.length / 1000)) // 动态计算步进值
+    
+    for (let i = 0; i < beatArray.length - step; i += step) {
+      const x = (0 + i / 10) * infoParams.suduratio
+      const y = (heightoff.value-50) - beatArray[i] * infoParams.lineratio + offset
+      
+      // 使用二次贝塞尔曲线来平滑线条
+      const nextX = (0 + (i + step) / 10) * infoParams.suduratio
+      const nextY = (heightoff.value-50) - beatArray[i + step] * infoParams.lineratio + offset
+      
+      const cpX = (x + nextX) / 2
+      const cpY = (y + nextY) / 2
+      
+      ctx.quadraticCurveTo(x, y, cpX, cpY)
     }
+    
+    // 绘制最后一个点
+    const lastX = (0 + (beatArray.length - 1) / 10) * infoParams.suduratio
+    const lastY = (heightoff.value-50) - beatArray[beatArray.length - 1] * infoParams.lineratio + offset
+    ctx.lineTo(lastX, lastY)
+  }
+  
+  // 一次性绘制整条路径
   ctx.stroke()
-      ctx.closePath()
-    }
-  }
-  if (index > 5) {
-    if (beatArray.length > 0) {
-      const firstX = 0
-      const firstY = (heightoff.value-50) - beatArray[0] * infoParams.lineratio + offset
-      ctx.moveTo(firstX, firstY)
-      for (let i = 0; i < beatArray.length - 1; i++) {
-        const x2 = (0 + (i + 1) / 10) * infoParams.suduratio
-        const y2 = (heightoff.value-50) - beatArray[i + 1] * infoParams.lineratio + offset
-        ctx.lineTo(x2, y2)
-      }
-      ctx.stroke()
-      ctx.closePath()
-    }
-  }
 }
 </script>