该代码可在Arkts 与 前端使用,基于canvas

仓库地址:https://gitee.com/harmony_os_example/harmony-os-ecg-waveform.git

代码中的list数组为波形数据,该示例需要根据自己业务替换绘制频率,波形数据,ecg原始数据生成x,y轴值等

相关代码:

@Entry
@Component
struct Index {
  @StorageProp('windowWidth') windowWidth: number = 1125;
  private readonly settings_bg: RenderingContextSettings = new RenderingContextSettings(true);
  private readonly ctx_bg: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings_bg);
  private readonly settings: RenderingContextSettings = new RenderingContextSettings(true);
  private readonly ctx: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
  @State drawFrequency: number = 256; // 绘制频率
  @State list: number[] =
    [-0.057600000000000005, -0.0544, -0.05040000000000001, -0.0456, -0.0408, -0.0352, -0.030400000000000003, -0.0256,
      -0.020800000000000003, -0.016, -0.011200000000000002, -0.007200000000000001, -0.0032, -0.0008, 0.0016, 0.0032,
      0.0048, 0.005600000000000001, 0.0048, 0.0032, 0.0008, -0.0024, -0.0064, -0.011200000000000002, -0.016,
      -0.020800000000000003, -0.024800000000000003, -0.028, -0.0296, -0.0296, -0.028, -0.024800000000000003,
      -0.020800000000000003, -0.016800000000000002, -0.0136, -0.0128, -0.0144, -0.018400000000000003, -0.024, -0.032,
      -0.04240000000000001, -0.052000000000000005, -0.05840000000000001, -0.06080000000000001, -0.0568, -0.048,
      -0.22480000000000003, -0.05280000000000001, 0.168, 0.4192000000000001, 0.6736000000000001, 0.9, 1.068, 1.1608,
      1.1744, 1.1048, 0.9584, 0.752, 0.5104000000000001, 0.2672, 0.0544, -0.1104, -0.2272, -0.264, -0.24320000000000003,
      -0.2256, -0.2144, -0.212, -0.22, -0.228, -0.2312, -0.22960000000000003, -0.2256, -0.22, -0.2176, -0.212, -0.2,
      -0.1896, -0.18160000000000004, -0.1768, -0.176, -0.17360000000000003, -0.16560000000000002, -0.15680000000000002,
      -0.14880000000000002, -0.14, -0.1312, -0.12080000000000002, -0.1064, -0.0928, -0.0824, -0.07200000000000001,
      -0.0624, -0.052000000000000005, -0.039200000000000006, -0.026400000000000003, -0.0136, -0.0008, 0.012,
      0.026400000000000003, 0.04240000000000001, 0.05840000000000001, 0.0728, 0.0872, 0.1008, 0.1136, 0.1272,
      0.13920000000000002, 0.1496, 0.1584, 0.16560000000000002, 0.17120000000000002, 0.1744, 0.176, 0.17520000000000002,
      0.172, 0.16640000000000002, 0.1584, 0.148, 0.1352, 0.12080000000000002, 0.10480000000000002, 0.088,
      0.06960000000000001, 0.05040000000000001, 0.0312, 0.012, -0.0048, -0.0216, -0.0376, -0.05280000000000001, -0.0664,
      -0.07840000000000001, -0.08880000000000002, -0.0976, -0.1056, -0.1112, -0.116, -0.1184, -0.1192, -0.1184, -0.1176,
      -0.1152, -0.112, -0.1088, -0.10480000000000002, -0.1008, -0.0968, -0.09360000000000002, -0.0904, -0.0864,
      -0.08320000000000001, -0.08, -0.07760000000000002, -0.076, -0.07440000000000001, -0.07360000000000001, -0.0728,
      -0.07200000000000001, -0.07200000000000001, -0.0728, -0.0728, -0.0728, -0.0728, -0.0728, -0.0728,
      -0.07200000000000001, -0.0712, -0.0704, -0.0688, -0.068, -0.0656, -0.064, -0.0624, -0.06080000000000001, -0.0592,
      -0.057600000000000005, -0.056, -0.055200000000000006, -0.0536, -0.052000000000000005, -0.0512,
      -0.05040000000000001, -0.0488, -0.048, -0.047200000000000006, -0.0464, -0.0456, -0.0456, -0.044800000000000006,
      -0.044800000000000006, -0.044, -0.044, -0.044, -0.044800000000000006, -0.0464, -0.047200000000000006,
      -0.049600000000000005, -0.052000000000000005, -0.055200000000000006, -0.05840000000000001, -0.0616, -0.0632,
      -0.064, -0.064, -0.0624, -0.06, -0.056, -0.0512, -0.0464, -0.044, -0.0432, -0.044800000000000006, -0.0488,
      -0.0544, -0.0616, -0.0712, -0.08, -0.0864, -0.088, -0.08320000000000001, -0.07440000000000001, -0.2272,
      -0.05840000000000001, 0.15680000000000002, 0.4, 0.6448, 0.8624, 1.0224000000000002, 1.1096, 1.1192, 1.0488, 0.904,
      0.7024000000000001, 0.4696, 0.2352, 0.0352, -0.1152, -0.1704, -0.1496, -0.1296, -0.116, -0.1072, -0.1072, -0.116,
      -0.124, -0.12560000000000002, -0.1232, -0.1176, -0.10960000000000002, -0.10480000000000002, -0.096, -0.0816,
      -0.068, -0.05840000000000001, -0.0512, -0.0632, -0.057600000000000005, -0.047200000000000006,
      -0.036800000000000006, -0.028, -0.0176, -0.007200000000000001, 0.004, 0.02, 0.0352, 0.0488, 0.06080000000000001,
      0.0728, 0.08560000000000001, 0.1008, 0.1168, 0.132, 0.148, 0.1648, 0.1824, 0.20160000000000003, 0.2208, 0.2392,
      0.256, 0.27280000000000004, 0.2888, 0.30319999999999997, 0.316, 0.3264, 0.33440000000000003, 0.33920000000000006,
      0.3408, 0.34, 0.33520000000000005, 0.32560000000000006, 0.3128, 0.2968, 0.276, 0.25120000000000003, 0.2232,
      0.1912, 0.15680000000000002, 0.1192, 0.08, 0.039200000000000006, -0.0016, -0.0432, -0.08320000000000001, -0.1232,
      -0.16080000000000003, -0.19760000000000005, -0.232, -0.264, -0.2936, -0.32080000000000003, -0.3456, -0.368,
      -0.3872, -0.40320000000000006, -0.4176, -0.4288, -0.43840000000000007, -0.4472, -0.4544, -0.46,
      -0.4648000000000001, -0.4688, -0.472, -0.47520000000000007, -0.4776, -0.47920000000000007, -0.4808, -0.4816,
      -0.4824000000000001, -0.4832000000000001, -0.484, -0.484, -0.4832000000000001, -0.4824000000000001, -0.4808,
      -0.47920000000000007, -0.4768, -0.4744, -0.47120000000000006, -0.468, -0.4648000000000001, -0.4616,
      -0.45920000000000005, -0.4568, -0.4544, -0.452, -0.44960000000000006, -0.4472, -0.4448, -0.4432, -0.4408,
      -0.43840000000000007, -0.436, -0.4328, -0.4288, -0.4248, -0.4192000000000001, -0.412, -0.404, -0.3952000000000001,
      -0.3848, -0.37440000000000007, -0.3632000000000001, -0.35120000000000007, -0.33920000000000006,
      -0.32720000000000005, -0.31520000000000004, -0.304, -0.292, -0.28, -0.268, -0.256, -0.244, -0.2328, -0.2224,
      -0.212, -0.2024, -0.1936, -0.18720000000000003, -0.18160000000000004, -0.17760000000000004, -0.17360000000000003,
      -0.17120000000000002, -0.1688, -0.168, -0.168, -0.16720000000000002, -0.16640000000000002, -0.16560000000000002,
      -0.1648, -0.22480000000000003, -0.1968, -0.16, -0.1168, -0.07200000000000001, -0.028800000000000003, 0.0104,
      0.048, 0.08560000000000001, 0.12560000000000002, 0.1728, 0.2312, 0.30720000000000003, 0.4048, 0.5256000000000001,
      0.6656000000000001, 0.8192, 0.9776, 1.1304, 1.2624000000000002, 1.36, 1.4064, 1.3968000000000005, 1.328, 1.2032,
      1.0304000000000002, 0.8240000000000001, 0.6048000000000001, 0.3952000000000001, 0.2208, 0.09360000000000002,
      0.05280000000000001, 0.07680000000000001, 0.1024, 0.1224, 0.1384, 0.148, 0.15280000000000002, 0.15760000000000002,
      0.16720000000000002, 0.18, 0.1952, 0.212, 0.22960000000000003, 0.25120000000000003, 0.27840000000000004, 0.304,
      0.3264, 0.3456, 0.36240000000000006, 0.3792, 0.39920000000000005, 0.4176, 0.4336, 0.4504, 0.4704, 0.4928, 0.5184,
      0.544, 0.5672, 0.5904, 0.616, 0.6416000000000001, 0.6672, 0.6936, 0.7176, 0.7416, 0.7672000000000001,
      0.7928000000000001, 0.8168000000000001, 0.8392000000000001, 0.8592000000000001, 0.8768000000000001, 0.892, 0.9032,
      0.9104, 0.9128, 0.9096, 0.9008, 0.8864000000000001, 0.8664000000000001, 0.84, 0.808, 0.7696000000000001,
      0.7272000000000001, 0.6792, 0.6272000000000001, 0.5728000000000001, 0.5152000000000001, 0.4552000000000001,
      0.3944, 0.332, 0.26880000000000004, 0.2064, 0.1456, 0.0864, 0.0296, -0.024, -0.076, -0.1248, -0.16960000000000003,
      -0.21120000000000003, -0.2504, -0.28800000000000003, -0.3224, -0.35520000000000007, -0.3848, -0.4104,
      -0.43440000000000006, -0.4552000000000001, -0.4736, -0.4888, -0.5016, -0.512, -0.52, -0.5272, -0.5328, -0.5384,
      -0.5416000000000001, -0.5432, -0.5432, -0.528, -0.5264, -0.524, -0.5208, -0.5168, -0.512, -0.508, -0.5048,
      -0.5016, -0.49840000000000007, -0.49440000000000006, -0.492, -0.49040000000000006, -0.4888, -0.4872000000000001,
      -0.4856, -0.484, -0.4824000000000001, -0.4816, -0.4808, -0.48, -0.47920000000000007, -0.4784000000000001,
      -0.4784000000000001, -0.4776, -0.4776, -0.4776, -0.4776, -0.4784000000000001, -0.4784000000000001,
      -0.4784000000000001, -0.4784000000000001, -0.4784000000000001, -0.4776, -0.4768, -0.47520000000000007, -0.4736,
      -0.472, -0.4696, -0.46720000000000006, -0.464, -0.4608, -0.4568, -0.452, -0.4472, -0.4408, -0.4336, -0.4248,
      -0.41520000000000007, -0.4048, -0.3936, -0.3816000000000001, -0.3688, -0.356, -0.34240000000000004,
      -0.32880000000000004, -0.316, -0.30240000000000006, -0.2896, -0.2768, -0.26480000000000004, -0.2544, -0.244,
      -0.2344, -0.2256, -0.2176, -0.21120000000000003, -0.204, -0.1984, -0.192, -0.1864, -0.1496, -0.1368, -0.1216,
      -0.1056, -0.092, -0.0824, -0.07760000000000002, -0.076, -0.0752, -0.0728, -0.0616, -0.0344, 0.015200000000000002,
      0.0952, 0.2072, 0.3496, 0.516, 0.6992, 0.8832000000000001, 1.0504000000000002, 1.1792, 1.2512, 1.2552,
      1.1896000000000002, 1.0552, 0.86, 0.6224000000000001, 0.36640000000000006, 0.1224, -0.08, -0.2264,
      -0.31040000000000006, -0.3296, -0.28640000000000004, -0.1952, -0.07200000000000001, -0.0024, -0.004, -0.0096,
      -0.0088, -0.004, 0.0032, 0.0144, 0.0256, 0.041600000000000005, 0.0648, 0.0864, 0.1024, 0.116, 0.1264, 0.136,
      0.1496, 0.16240000000000002, 0.17120000000000002, 0.18160000000000004, 0.1952, 0.21120000000000003, 0.2312,
      0.25120000000000003, 0.26880000000000004, 0.2856, 0.304, 0.32320000000000004, 0.34320000000000006,
      0.3632000000000001, 0.3816000000000001, 0.4, 0.42, 0.4416000000000001, 0.4624, 0.4824000000000001, 0.5008, 0.5168,
      0.532, 0.5448000000000001, 0.5544, 0.56, 0.5616, 0.5584, 0.5512, 0.5392, 0.5224, 0.5016, 0.47520000000000007,
      0.4448, 0.4104, 0.3728, 0.332, 0.2888, 0.244, 0.19760000000000005, 0.1504, 0.1032, 0.055200000000000006, 0.0096,
      -0.0328, -0.07440000000000001, -0.112, -0.14720000000000005, -0.17920000000000005, -0.2072, -0.232, -0.2528,
      -0.2712, -0.2872, -0.3, -0.31040000000000006, -0.316, -0.31920000000000004, -0.32, -0.3184, -0.31440000000000007,
      -0.308, -0.3, -0.29040000000000005, -0.2808, -0.27040000000000003, -0.26080000000000003, -0.25120000000000003,
      -0.24160000000000004, -0.2328, -0.22480000000000003, -0.2184, -0.2128, -0.208, -0.204, -0.2008, -0.2, -0.2,
      -0.20160000000000003, -0.2032, -0.20560000000000003, -0.2072, -0.20960000000000004, -0.212, -0.2128, -0.212,
      -0.2104, -0.208, -0.2048, -0.2, -0.1952, -0.1888, -0.18320000000000003, -0.1768, -0.17120000000000002,
      -0.16560000000000002, -0.16, -0.15520000000000003, -0.152, -0.14880000000000002, -0.148, -0.148, -0.148, -0.1496,
      -0.15120000000000003, -0.152, -0.15280000000000002, -0.15280000000000002, -0.1504, -0.14720000000000005, -0.1424,
      -0.136, -0.1296, -0.1232, -0.1176, -0.1112, -0.10480000000000002, -0.0992, -0.0952, -0.0912, -0.0864, -0.0816,
      -0.07680000000000001, -0.07200000000000001, -0.0704, -0.0688, -0.068, -0.06720000000000001, -0.06720000000000001,
      -0.0688, -0.07200000000000001, -0.07360000000000001, -0.07440000000000001, -0.07360000000000001, -0.08, -0.0792,
      -0.08, -0.08080000000000001, -0.0816, -0.08320000000000001, -0.0872, -0.0928, -0.1008, -0.108, -0.1152,
      -0.12080000000000002, -0.1272, -0.2488, -0.2216, -0.17760000000000004, -0.116, -0.036800000000000006,
      0.055200000000000006, 0.15760000000000002, 0.26480000000000004, 0.3728, 0.4784000000000001, 0.5744, 0.6552,
      0.7144000000000001, 0.7456, 0.744, 0.7072, 0.6312000000000001, 0.5152000000000001, 0.3616, 0.1768, -0.0256,
      -0.232, -0.4248, -0.588, -0.7104000000000001, -0.784, -0.8064000000000001, -0.776, -0.7024000000000001,
      -0.6032000000000001, -0.49440000000000006, -0.3968, -0.3184, -0.26160000000000005, -0.228, -0.21920000000000003,
      -0.224, -0.22960000000000003, -0.22960000000000003, -0.2216, -0.212, -0.2048, -0.1968, -0.18720000000000003,
      -0.176, -0.16080000000000003, -0.1448, -0.1296, -0.1104, -0.0864, -0.05840000000000001, -0.0256, 0.008,
      0.041600000000000005, 0.076, 0.1128, 0.1504, 0.188, 0.2256, 0.26160000000000005, 0.2968, 0.33440000000000003,
      0.3712, 0.408, 0.4432, 0.476, 0.5064000000000001, 0.5344, 0.56, 0.5824, 0.6, 0.6128000000000001, 0.6216,
      0.6272000000000001, 0.6288000000000001, 0.6256, 0.6176, 0.6063999999999999, 0.5912000000000001, 0.5736, 0.5536,
      0.5296000000000001, 0.504, 0.476, 0.4472, 0.4176, 0.3872, 0.356, 0.32560000000000006, 0.2968, 0.26880000000000004,
      0.24320000000000003, 0.21920000000000003, 0.1968, 0.17760000000000004, 0.16, 0.1448, 0.1312, 0.1184, 0.1072,
      0.0968, 0.088, 0.0792, 0.0704, 0.0624, 0.0544, 0.0464, 0.0384, 0.0296, 0.020800000000000003, 0.011200000000000002,
      0.0016, -0.007200000000000001, -0.0176, -0.028, -0.0384, -0.05040000000000001, -0.0616, -0.07440000000000001,
      -0.088, -0.1008, -0.1144, -0.1272, -0.14, -0.152, -0.164, -0.1744, -0.18320000000000003, -0.192, -0.2, -0.2072,
      -0.21360000000000004, -0.21920000000000003, -0.224, -0.228, -0.2312, -0.2344, -0.2352, -0.2352, -0.2344, -0.232,
      -0.2304, -0.2272, -0.2232, -0.21920000000000003, -0.216, -0.2128, -0.21120000000000003, -0.20960000000000004,
      -0.2088, -0.20960000000000004, -0.212, -0.216, -0.22, -0.2256, -0.232, -0.24, -0.2488, -0.2584,
      -0.26880000000000004, -0.2792, -0.2912, -0.304, -0.3168, -0.3296, -0.3416, -0.35440000000000005,
      -0.36640000000000006, -0.37840000000000007, -0.388, -0.3976, -0.4056, -0.4136, -0.4216, -0.4296, -0.4376,
      -0.4456000000000001, -0.4544, -0.464, -0.4736, -0.4816, -0.4872000000000001, -0.49040000000000006,
      -0.6032000000000001, -0.5544, -0.4816, -0.3848, -0.26480000000000004, -0.1248, 0.024800000000000003,
      0.17920000000000005, 0.32720000000000005, 0.464, 0.584, 0.6824000000000001, 0.7552000000000001, 0.8,
      0.8168000000000001, 0.8072, 0.7736000000000001, 0.7176, 0.6392000000000001, 0.5408000000000001,
      0.42640000000000006, 0.3048, 0.1864, 0.07840000000000001, -0.0104, -0.044, -0.032, -0.016, -0.0008, 0.012, 0.0216,
      0.0296, 0.036800000000000006, 0.0432, 0.05280000000000001, 0.0624, 0.07200000000000001, 0.08320000000000001,
      0.0968, 0.1136, 0.1336, 0.15280000000000002, 0.168, 0.1824, 0.1968, 0.2104, 0.224, 0.2368, 0.24720000000000003,
      0.2592, 0.2752, 0.2928, 0.3128, 0.3336, 0.352, 0.3712, 0.3912000000000001, 0.41120000000000007, 0.4296, 0.4464,
      0.4696, 0.484, 0.49840000000000007, 0.5136000000000001, 0.5272, 0.54, 0.5512, 0.5608000000000001, 0.5696,
      0.5760000000000001, 0.5792, 0.5784, 0.5736, 0.5648000000000001, 0.5528000000000001, 0.536, 0.5144, 0.4888,
      0.45920000000000005, 0.42640000000000006, 0.3912000000000001, 0.3528, 0.31040000000000006, 0.2664, 0.2216,
      0.17520000000000002, 0.128, 0.0816, 0.0344, -0.0096, -0.05040000000000001, -0.08880000000000002, -0.1232,
      -0.15520000000000003, -0.18320000000000003, -0.208, -0.2288, -0.24720000000000003, -0.2632, -0.2768,
      -0.28800000000000003, -0.29760000000000003, -0.30319999999999997, -0.30640000000000006, -0.308,
      -0.30720000000000003, -0.3048, -0.3008, -0.2952, -0.28800000000000003, -0.2816, -0.276, -0.2696, -0.2632,
      -0.25680000000000003, -0.25120000000000003, -0.2464, -0.2424, -0.2392, -0.23760000000000003, -0.236, -0.236,
      -0.23760000000000003, -0.2408, -0.2448, -0.2504, -0.256, -0.26160000000000005, -0.268, -0.27440000000000003,
      -0.28, -0.2856, -0.2896, -0.2928, -0.296, -0.29760000000000003, -0.2992, -0.2992, -0.29760000000000003, -0.296,
      -0.2936, -0.2896, -0.28400000000000003, -0.2776, -0.2696, -0.26, -0.2504, -0.24, -0.228, -0.216, -0.2032, -0.1912,
      -0.1784, -0.16640000000000002, -0.1536, -0.1416, -0.13040000000000002, -0.12080000000000002, -0.112,
      -0.10480000000000002, -0.0992, -0.096, -0.0952, -0.096, -0.0992, -0.104, -0.1088, -0.1144, -0.12,
      -0.12560000000000002, -0.13040000000000002, -0.13440000000000002, -0.1384, -0.1424, -0.14720000000000005, -0.1544,
      -0.16240000000000002, -0.172, -0.1824, -0.19280000000000003, -0.204, -0.2144, -0.2224, -0.2256, -0.224,
      -0.43440000000000006, -0.3448, -0.2104, -0.0376, 0.16160000000000002, 0.3712, 0.5704, 0.7392000000000001,
      0.8632000000000001, 0.9408, 0.9664, 0.9408, 0.8704000000000001, 0.7664000000000001, 0.6432000000000001, 0.52,
      0.40320000000000006, 0.2936, 0.19280000000000003, 0.1024, 0.0232, -0.0408, -0.0944, -0.1424, -0.1632,
      -0.15680000000000002, -0.148, -0.1368, -0.1264, -0.1184, -0.1104, -0.1008, -0.08960000000000001,
      -0.07840000000000001, -0.06720000000000001, -0.0568, -0.044, -0.028, -0.008, 0.012, 0.0328, 0.0512, 0.0688,
      0.0864, 0.104, 0.12, 0.1336, 0.1448, 0.15680000000000002, 0.172, 0.18720000000000003, 0.204, 0.2216,
      0.23760000000000003, 0.25520000000000004, 0.2752, 0.2952, 0.31520000000000004, 0.336, 0.35520000000000007, 0.376,
      0.3968, 0.4168, 0.436, 0.4528, 0.46720000000000006, 0.47920000000000007, 0.4888, 0.49440000000000006, 0.4968,
      0.4952, 0.4896, 0.47920000000000007, 0.4648000000000001, 0.4456000000000001, 0.42240000000000005, 0.3944,
      0.3632000000000001, 0.328, 0.29040000000000005, 0.2504, 0.2104, 0.16960000000000003, 0.12880000000000005,
      0.08880000000000002, 0.0488, 0.011200000000000002, -0.024, -0.057600000000000005, -0.0904, -0.12,
      -0.14720000000000005, -0.172, -0.1944, -0.2128, -0.2304, -0.2448, -0.2584, -0.2696, -0.2792, -0.2872, -0.2928,
      -0.29760000000000003, -0.3, -0.30160000000000003, -0.3008, -0.2992, -0.296, -0.292, -0.28800000000000003,
      -0.28240000000000004, -0.2776, -0.2712, -0.264, -0.256, -0.248, -0.2392, -0.2304, -0.2208, -0.21120000000000003,
      -0.20160000000000003, -0.1936, -0.1856, -0.1784, -0.172, -0.1648, -0.1592, -0.1536, -0.148, -0.1424,
      -0.1368]; // 绘制数据
  @State drawList: number[] = [];
  @State originalData: number[] = []; // 原始数据
  @State ecgPlay: boolean = false;
  @State times: number = 0;
  @State lastX: number | null = null;
  @State lastY: number | null = null;
  @State drawIndex: number = 0;
  @State canvasWidth: number = 375;
  @State canvasHeight: number = 201;
  @State averageGridWidth: number = 30;
  @State gridWidth: number = 6;
  @State maxGridWidth: number = 151;

  startDraw() {
    this.drawCurve();
    this.drawList = [...this.list]

  }

  resetDraw() {
    this.lastX = null;
    this.lastY = null;
    this.drawIndex = 0;
    this.drawList = [...this.list];
    clearInterval(this.times)
    this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
  }

  aboutToAppear(): void {
    this.canvasWidth = Math.ceil(px2vp(this.windowWidth))
  }

  // 播放完成,重置数据
  resetPlay() {
    this.ecgPlay = false;
    this.lastX = null;
    this.lastY = null;
    this.drawIndex = 0;
    this.drawList = [...this.list]
  }

  drawCurve() {
    let list: number[] = this.drawList;

    if (list.length === 0) {
      this.ecgPlay = false;
      return
    }
    let screenPointCount = (2 * this.drawFrequency) + (this.drawFrequency * (1 / 5)) // 屏幕点的数量
    let pointWidth = (this.canvasWidth - 24) / screenPointCount; // 每一个点的宽度

    // 256 频率
    let interval = (1000 / this.drawFrequency) * 4;

    // 定时器
    this.times = setInterval(() => {
      let arr: number[] = list.splice(0, 4);

      if (arr.length === 0) {
        clearInterval(this.times);
        this.resetPlay();
        this.resetDraw();
        return
      }

      this.ctx.fillStyle = 'rgba(0, 0, 0, 0)';
      this.ctx.clearRect(((this.drawIndex + 4) * pointWidth) + 24, 0, (4 * pointWidth) + 10,
        this.canvasHeight - 20)
      this.ctx.fillRect(((this.drawIndex + 4) * pointWidth) + 24, 0, (4 * pointWidth) + 10,
        this.canvasHeight - 20);


      for (let i = 0; i < arr.length; i++) {
        this.drawIndex = this.drawIndex + 1;
        let x = (this.drawIndex * pointWidth) + 24;
        let y = ((this.canvasHeight - 20) / 3) * 2 - arr[i] * 10 * this.gridWidth;

        if (y > this.canvasHeight - 20) {
          y = this.canvasHeight - 21;
        } else if (y <= 0) {
          y = 0;
        } else {
          y = y;
        }


        if (this.drawIndex >= screenPointCount) {
          this.ctx.clearRect(24, 0, 10, this.canvasHeight)
          this.drawIndex = 0;
          this.lastX = null; // 关键:清除上一个点,防止错误连接
          this.lastY = null;
          continue;
        }

        this.ctx.strokeStyle = "#000000";
        this.ctx.lineWidth = 1.5;

        if (this.lastX === null || this.lastY === null) {
          // 记录第一个点,不进行绘制
          this.lastX = x;
          this.lastY = y;
          continue;
        }

        this.ctx.beginPath();
        this.ctx.moveTo(this.lastX, this.lastY); // 从上一个点开始
        this.ctx.lineTo(x, y); // 连接到当前点
        this.ctx.stroke();
        this.ctx.closePath();
        // 更新上一个点的坐标

        this.lastX = x;
        this.lastY = y;
      }

    }, interval);
  }

  // 网格
  drawGrid() {


    // 绘制小网格x轴
    this.ctx_bg.beginPath();
    this.ctx_bg.strokeStyle = '#f1bdc3';
    this.ctx_bg.lineWidth = 0.5;
    for (let i = 24; i <= this.canvasWidth - 20; i += this.gridWidth) {
      if (i >= 24) {
        this.ctx_bg.moveTo(i, 0);
        this.ctx_bg.lineTo(i, this.canvasHeight - 20);
      }
    }
    this.ctx_bg.stroke();
    this.ctx_bg.closePath();

    // 绘制小网格轴y轴
    this.ctx_bg.beginPath();
    this.ctx_bg.strokeStyle = '#f1bdc3';
    this.ctx_bg.lineWidth = 0.5;
    for (let i = 0; i <= this.canvasHeight - 20; i += this.gridWidth) {
      this.ctx_bg.moveTo(24, i);
      this.ctx_bg.lineTo(this.canvasWidth, i);
    }
    this.ctx_bg.stroke();
    this.ctx_bg.closePath();


    // 绘制中网格x轴
    this.ctx_bg.beginPath();
    this.ctx_bg.strokeStyle = '#cd0a20';
    this.ctx_bg.lineWidth = 0.5;
    for (let i = 24; i <= this.canvasWidth; i += this.averageGridWidth) {
      if (i >= 24) {
        this.ctx_bg.moveTo(i, 0);
        this.ctx_bg.lineTo(i, this.canvasHeight - 20);
      }
    }
    this.ctx_bg.stroke();
    this.ctx_bg.closePath();

    // 绘制中网格y轴
    this.ctx_bg.beginPath();
    this.ctx_bg.strokeStyle = '#cd0a20';
    this.ctx_bg.lineWidth = 0.5;
    for (let i = 0; i <= this.canvasHeight - 20; i += this.averageGridWidth) {
      this.ctx_bg.moveTo(24, i);
      this.ctx_bg.lineTo(this.canvasWidth, i);
    }
    this.ctx_bg.stroke();
    this.ctx_bg.closePath();

    // 绘制x轴大网格线
    this.ctx_bg.beginPath();
    this.ctx_bg.strokeStyle = '#cd0a20';
    this.ctx_bg.lineWidth = 1;
    this.ctx_bg.font = '12vp sans-serif'

    for (let i = 24; i <= this.canvasWidth; i += this.maxGridWidth) {
      if (i >= 24) {
        this.ctx_bg.moveTo(i, 0);
        this.ctx_bg.lineTo(i, this.canvasHeight - 20);
      }
    }
    this.ctx_bg.stroke();
    this.ctx_bg.closePath();
  }

  build() {

    Column() {
      Row() {
        Column() {
          Canvas(this.ctx_bg)
            .width(`100%`)
            .height(`210vp`)
            .position({ left: 0, top: 0 })
            .onReady(() => {
              this.drawGrid();
              // this.drawCurve();
            });

          Canvas(this.ctx)
            .width(`100%`)
            .height(`210vp`)
            .position({ left: 0, top: 0 })
            .onReady(() => {

            });
        }
        .width(`100%`)
        .height(`210vp`)
        .backgroundColor(Color.White)
      }
      .width('100%')
      .height(`210vp`)
      .backgroundColor(0xDCDCDC)


      Row() {
        Button(this.ecgPlay ? '结束绘制' : '开始绘制')
          .width('201vp')
          .height('50vp')
          .backgroundColor(Color.Black)
          .type(ButtonType.Normal)
          .borderRadius('12vp')
          .onClick(() => {

            this.startDraw();
          })
      }

    }.width('100%').height('100%').backgroundColor("#f6f6f6")

  }
}

Logo

讨论HarmonyOS开发技术,专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐