欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 财经 > 产业 > 鸿蒙next 使用canvas实现ecg动态波形绘制

鸿蒙next 使用canvas实现ecg动态波形绘制

2025/6/22 17:42:29 来源:https://blog.csdn.net/weixin_66582617/article/details/148813040  浏览:    关键词:鸿蒙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")}
}

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词