该代码可在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")}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.pswp.cn/news/910292.shtml
繁体地址,请注明出处:http://hk.pswp.cn/news/910292.shtml
英文地址,请注明出处:http://en.pswp.cn/news/910292.shtml

如若内容造成侵权/违法违规/事实不符,请联系英文站点网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于原生能力的键盘控制

基于原生能力的键盘控制 前言一、进入页面TextInput获焦1、方案2、核心代码 二、点击按钮或其他事件触发TextInput获焦1、方案2、核心代码 三、键盘弹出后只上抬特定的输入组件1、方案2、核心代码 四、监听键盘高度1、方案2、核心代码 五、设置窗口在键盘抬起时的页面避让模式为…

大数据治理域——数据存储与成本管理

摘要 本文主要探讨了数据存储与成本管理的多种策略。介绍了数据压缩技术&#xff0c;如MaxCompute的archive压缩方法&#xff0c;通过RAID file形式存储数据&#xff0c;可有效节省空间&#xff0c;但恢复时间较长&#xff0c;适用于冷备与日志数据。还详细阐述了数据生命周期…

国产Linux银河麒麟操作系统上使用自带openssh远程工具SSH方式登陆华为交换机或服务器

在Windows和Linux Debian系统上我一直使用electerm远程工具访问服务器或交换机&#xff0c; 一、 electerm简介 简介&#xff1a;electerm是一款开源免费的SSH工具&#xff0c;具有良好的跨平台兼容性&#xff0c;适用于Windows、macOS、Linux以及麒麟操作系统。特点&#xf…

Logback 在java中的使用

Logback 是 Java 应用中广泛使用的日志框架&#xff0c;以下是其核心使用方法及最佳实践&#xff1a; 1. 引入依赖 在 Maven 或 Gradle 项目中添加 Logback 及 SLF4J 依赖&#xff1a; <!-- Maven --> <dependency><groupId>ch.qos.logback</groupId>…

Axure应用交互设计:中继器—整行、条件行、当前行赋值

亲爱的小伙伴,如有帮助请订阅专栏!跟着老师每课一练,系统学习Axure交互设计课程! Axure产品经理精品视频课https://edu.csdn.net/course/detail/40420 课程主题:对中继器中:整行、符合某种条件的任意行、当前行的赋值操作 课程视频:

ToolsSet之:TTS及Morse编解码

ToolsSet是微软商店中的一款包含数十种实用工具数百种细分功能的工具集合应用&#xff0c;应用基本功能介绍可以查看以下文章&#xff1a; Windows应用ToolsSet介绍https://blog.csdn.net/BinField/article/details/145898264其中Text菜单中的TTS & Morse可用于将文本转换…

【C++】编码传输:创建零拷贝帧对象4:shared_ptr转unique_ptr给到rtp打包

【C++】编码传输:创建零拷贝帧对象3: dll api转换内部的共享内存根本原因 你想要的是基于 packet 指向的那个已有对象,拷贝(或移动)出一个新的 VideoDataPacket3 实例,因此需要把那个对象本身传进去——也就是 *packet。copilot的原因分析与gpt一致 The issue is with t…

基于UDP的套接字通信

udp是一个面向无连接的&#xff0c;不安全的&#xff0c;报式传输层协议&#xff0c;udp的通信过程默认也是阻塞的。使用UDP进行通信&#xff0c;服务器和客户端的处理步骤比TCP要简单很多&#xff0c;并且两端是对等的 &#xff08;通信的处理流程几乎是一样的&#xff09;&am…

华为CE交换机抓包

capture-packet interface 100GE1/0/5 destination file 001.cap packet-len 64 注&#xff1a;早期版本&#xff08;disp device&#xff09;可能在系统视图下&#xff08;sys&#xff09; 抓完包后可以看到对应文件&#xff08;早期版本在根目录下&#xff09;&#xff1a;…

Python 数据分析与可视化 Day 3 - Pandas 数据筛选与排序操作

&#x1f3af; 今日目标 掌握 DataFrame 的条件筛选&#xff08;布尔索引&#xff09;学会多条件筛选、逻辑运算熟练使用排序&#xff08;sort_values&#xff09;提升数据组织力结合列选择进行数据提取分析 &#x1f9ea; 一、列选择与基本筛选 ✅ 选择单列 / 多列 df[&quo…

Vite项目初始化与配置

下面,我们来系统的梳理关于 Vite 项目初始化与配置 的基本知识点: 一、Vite 核心概念与优势 1.1 什么是 Vite? Vite(法语意为 “快速”)是新一代的前端构建工具,由 Vue.js 作者尤雨溪开发。它解决了传统构建工具(如 Webpack)在开发环境中的性能瓶颈问题。 1.2 Vite …

Transformer中的核心问题 知识点汇总

Transformer架构图 transformer整体架构 1. Transformer 的参数配置 Transformer 的Encoder层和Decoder层都使用6个注意力模块&#xff0c;所有的子网络的输出维度均为512维&#xff0c;多头注意力部分使用了8个注意力头。 2. 归一化的方式 归一化的方式为LayerNorm&#xff0c…

python web开发-Flask数据库集成

Flask 数据库集成完全指南&#xff1a;Flask-SQLAlchemy 实践 1. 引言 数据库是现代Web应用的核心组件&#xff0c;Flask通过Flask-SQLAlchemy扩展提供了强大的数据库集成能力。本文将全面介绍如何在Flask应用中使用Flask-SQLAlchemy进行数据库操作&#xff0c;涵盖从基础配置…

一站式用AI编程神奇Cursor/Trae(VScode环境)开发运行Scala应用

平时开发时&#xff0c;我们常用 IDEA 搭配 Scala 来开发 Spark 或 Flink 等大数据应用。但如今像 Cursor 这样的编程神器层出不穷&#xff0c;它们只支持 VSCode。要是 Scala 应用能在 VSCode 环境下便捷运行&#xff0c;我们就无需在 VSCode 开发、却在 IDEA 运行&#xff0c…

【Django开发】django美多商城项目完整开发4.0第2篇:项目准备,配置【附代码文档】

教程总体简介&#xff1a;美多商城 商业模式介绍 1.B2B--企业对企业 2.C2C--个人对个人 5.O2O--线上到线下 开发流程 说明&#xff1a; 需求分析 1. 用户部分 注册 登录 个人信息 地址管理 修改密码 3. 购物车部分 购物车管理 项目架构 创建工程 1. 在git平台创建工程 2. 添加前…

基于 OpenCV 的图像亮度、对比度与锐度调节

图像亮度、对比度和锐度是图像质量感知的重要参数&#xff0c;调节这些属性常用于图像增强、图像美化或图像分析的预处理阶段。本文将基于 OpenCV 实现这三项基础图像处理功能&#xff0c;并提供滑动条交互界面与直方图可视化分析&#xff0c;方便调试和理解效果。 亮度调整 图…

WAF(web应用防火墙)的简单了解

WAF称之为Web应用防火墙&#xff0c;是一种专门设计用于保护web应用程序免受恶意攻击的安全设备&#xff0c;能实时监控过滤和拦截可能对网站造成危害的网络流量&#xff0c;从而避免网络服务器被恶意入侵导致性能异常、数据泄露、服务中断这些问题 (WAF是通过执行一系列针对HT…

跟着AI学习C# Day28

&#x1f4c5; Day 28&#xff1a;C# 源生成器&#xff08;Source Generators&#xff09;与编译时元编程 ✅ 学习目标&#xff1a; 理解什么是 源生成器&#xff08;Source Generator&#xff09;&#xff1b;掌握如何在 编译阶段生成 C# 代码&#xff0c;而不是运行时动态处…

设计模式精讲 Day 4:建造者模式(Builder Pattern)

【设计模式精讲 Day 4】建造者模式&#xff08;Builder Pattern&#xff09; 文章简述&#xff1a; 在软件开发中&#xff0c;对象的构造过程往往复杂且容易出错&#xff0c;尤其是在对象包含多个可选参数或构建步骤时。建造者模式&#xff08;Builder Pattern&#xff09;正是…

如何轻松地将联系人从 iPhone 转移到 iPhone?

也许您升级到最新的 iPhone 型号&#xff0c;或者需要切换到另一部 iPhone 来工作。无论如何&#xff0c;您不能错过您的联系人&#xff0c;这对每个人来说都是最重要的数据。因此&#xff0c;今天我们将分享 5 种如何将联系人从 iPhone 转移到 iPhone 的方法&#xff0c;帮助您…