鸿蒙next 使用canvas实现ecg动态波形绘制
·
该代码可在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")
}
}
更多推荐

所有评论(0)