鴻蒙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")}
}

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：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方式登陸華為交換機或服務器

國產Linux銀河麒麟操作系統上使用自帶openssh遠程工具SSH方式登陸華為交換機或服務器

在Windows和Linux Debian系統上我一直使用electerm遠程工具訪問服務器或交換機&#xff0c; 一、 electerm簡介 簡介&#xff1a;electerm是一款開源免費的SSH工具&#xff0c;具有良好的跨平臺兼容性&#xff0c;適用于Windows、macOS、Linux以及麒麟操作系統。特點&#xf…
閱讀更多...
Logback 在java中的使用

Logback 在java中的使用

Logback 是 Java 應用中廣泛使用的日志框架&#xff0c;以下是其核心使用方法及最佳實踐&#xff1a; 1. 引入依賴 在 Maven 或 Gradle 項目中添加 Logback 及 SLF4J 依賴&#xff1a; <!-- Maven --> <dependency><groupId>ch.qos.logback</groupId>…
閱讀更多...
Axure應用交互設計：中繼器—整行、條件行、當前行賦值

Axure應用交互設計：中繼器—整行、條件行、當前行賦值

親愛的小伙伴，如有幫助請訂閱專欄！跟著老師每課一練，系統學習Axure交互設計課程！ Axure產品經理精品視頻課https://edu.csdn.net/course/detail/40420 課程主題：對中繼器中：整行、符合某種條件的任意行、當前行的賦值操作 課程視頻：
閱讀更多...
ToolsSet之：TTS及Morse編解碼

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++】編碼傳輸：創建零拷貝幀對象4：shared_ptr轉unique_ptr給到rtp打包

【C++】編碼傳輸：創建零拷貝幀對象3： dll api轉換內部的共享內存根本原因 你想要的是基于 packet 指向的那個已有對象，拷貝（或移動）出一個新的 VideoDataPacket3 實例，因此需要把那個對象本身傳進去——也就是 *packet。copilot的原因分析與gpt一致 The issue is with t…
閱讀更多...
基于UDP的套接字通信

基于UDP的套接字通信

udp是一個面向無連接的&#xff0c;不安全的&#xff0c;報式傳輸層協議&#xff0c;udp的通信過程默認也是阻塞的。使用UDP進行通信&#xff0c;服務器和客戶端的處理步驟比TCP要簡單很多&#xff0c;并且兩端是對等的 &#xff08;通信的處理流程幾乎是一樣的&#xff09;&am…
閱讀更多...
華為CE交換機抓包

華為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 數據篩選與排序操作

Python 數據分析與可視化 Day 3 - Pandas 數據篩選與排序操作

&#x1f3af; 今日目標 掌握 DataFrame 的條件篩選&#xff08;布爾索引&#xff09;學會多條件篩選、邏輯運算熟練使用排序&#xff08;sort_values&#xff09;提升數據組織力結合列選擇進行數據提取分析 &#x1f9ea; 一、列選擇與基本篩選 ? 選擇單列 / 多列 df[&quo…
閱讀更多...
Vite項目初始化與配置

Vite項目初始化與配置

下面，我們來系統的梳理關于 Vite 項目初始化與配置 的基本知識點： 一、Vite 核心概念與優勢 1.1 什么是 Vite？ Vite（法語意為 “快速”）是新一代的前端構建工具，由 Vue.js 作者尤雨溪開發。它解決了傳統構建工具（如 Webpack）在開發環境中的性能瓶頸問題。 1.2 Vite …
閱讀更多...
Transformer中的核心問題 知識點匯總

Transformer中的核心問題 知識點匯總

Transformer架構圖 transformer整體架構 1. Transformer 的參數配置 Transformer 的Encoder層和Decoder層都使用6個注意力模塊&#xff0c;所有的子網絡的輸出維度均為512維&#xff0c;多頭注意力部分使用了8個注意力頭。 2. 歸一化的方式 歸一化的方式為LayerNorm&#xff0c…
閱讀更多...
python web開發-Flask數據庫集成

python web開發-Flask數據庫集成

Flask 數據庫集成完全指南&#xff1a;Flask-SQLAlchemy 實踐 1. 引言 數據庫是現代Web應用的核心組件&#xff0c;Flask通過Flask-SQLAlchemy擴展提供了強大的數據庫集成能力。本文將全面介紹如何在Flask應用中使用Flask-SQLAlchemy進行數據庫操作&#xff0c;涵蓋從基礎配置…
閱讀更多...
一站式用AI編程神奇Cursor/Trae（VScode環境）開發運行Scala應用

一站式用AI編程神奇Cursor/Trae（VScode環境）開發運行Scala應用

平時開發時&#xff0c;我們常用 IDEA 搭配 Scala 來開發 Spark 或 Flink 等大數據應用。但如今像 Cursor 這樣的編程神器層出不窮&#xff0c;它們只支持 VSCode。要是 Scala 應用能在 VSCode 環境下便捷運行&#xff0c;我們就無需在 VSCode 開發、卻在 IDEA 運行&#xff0c…
閱讀更多...
【Django開發】django美多商城項目完整開發4.0第2篇：項目準備,配置【附代碼文檔】

【Django開發】django美多商城項目完整開發4.0第2篇：項目準備,配置【附代碼文檔】

教程總體簡介&#xff1a;美多商城 商業模式介紹 1.B2B--企業對企業 2.C2C--個人對個人 5.O2O--線上到線下 開發流程 說明&#xff1a; 需求分析 1. 用戶部分 注冊 登錄 個人信息 地址管理 修改密碼 3. 購物車部分 購物車管理 項目架構 創建工程 1. 在git平臺創建工程 2. 添加前…
閱讀更多...
基于 OpenCV 的圖像亮度、對比度與銳度調節

基于 OpenCV 的圖像亮度、對比度與銳度調節

圖像亮度、對比度和銳度是圖像質量感知的重要參數&#xff0c;調節這些屬性常用于圖像增強、圖像美化或圖像分析的預處理階段。本文將基于 OpenCV 實現這三項基礎圖像處理功能&#xff0c;并提供滑動條交互界面與直方圖可視化分析&#xff0c;方便調試和理解效果。 亮度調整 圖…
閱讀更多...
WAF(web應用防火墻)的簡單了解

WAF(web應用防火墻)的簡單了解

WAF稱之為Web應用防火墻&#xff0c;是一種專門設計用于保護web應用程序免受惡意攻擊的安全設備&#xff0c;能實時監控過濾和攔截可能對網站造成危害的網絡流量&#xff0c;從而避免網絡服務器被惡意入侵導致性能異常、數據泄露、服務中斷這些問題 (WAF是通過執行一系列針對HT…
閱讀更多...
跟著AI學習C# Day28

跟著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：建造者模式（Builder Pattern）

【設計模式精講 Day 4】建造者模式&#xff08;Builder Pattern&#xff09; 文章簡述&#xff1a; 在軟件開發中&#xff0c;對象的構造過程往往復雜且容易出錯&#xff0c;尤其是在對象包含多個可選參數或構建步驟時。建造者模式&#xff08;Builder Pattern&#xff09;正是…
閱讀更多...
如何輕松地將聯系人從 iPhone 轉移到 iPhone？

如何輕松地將聯系人從 iPhone 轉移到 iPhone？

也許您升級到最新的 iPhone 型號&#xff0c;或者需要切換到另一部 iPhone 來工作。無論如何&#xff0c;您不能錯過您的聯系人&#xff0c;這對每個人來說都是最重要的數據。因此&#xff0c;今天我們將分享 5 種如何將聯系人從 iPhone 轉移到 iPhone 的方法&#xff0c;幫助您…
閱讀更多...
最新文章

Copyright @ 2022~2023