【一步步开发AI运动小程序】六、人体骨骼图绘制

随着人工智能技术的不断发展，阿里体育等IT大厂，推出的“乐动力”、“天天跳绳”AI运动APP，让云上运动会、线上运动会、健身打卡、AI体育指导等概念空前火热。那么，能否将这些在APP成功应用的场景搬上小程序，分享这些概念的红利呢？本系列文章就带您一步一步从零开始开发一个AI运动小程序，本系列文章将使用“云智AI运动识别小程序插件”，请先行在微信服务市场或官网了解详情。

一、骨骼图绘制原理

人体骨骼图的绘制，是通过在camera组件上附一个同等大小的透明canvas组件，在上面绘制关键点达到与人体图像重合的目的。

二、绘制代码

<template> 	<view class="human-detection"> 		<camera id="preview" class="preview" :style="videoStyles" flash="off" :device-position="deviceKey" 			resolution="high" frame-size="low" @initdone="onCameraReady"> 		</camera> 		<canvas v-if="poseDrawEnabled" class="preview graphs" type="2d" id="graphics" :style="videoStyles"></canvas> 	</view> </template>  <script>  	const AiSports = requirePlugin("aiSport"); 	const PoseGraphs = AiSports.PoseGraphs; 	const humanDetection = AiSports.humanDetection;  	export default { 		data() { 			return { 				zoom: 1, 				deviceKey: "back", 				previewWidth: 480, 				previewHeight: 640, 				previewRate: 1,  				frameWidth: 480, 				frameHeight: 640, 				status: 'unknown', 				fps: 0, 				poseFps: 0,  				isHumanBody: false 			}; 		}, 		computed: { 			videoStyles() { 				const style = `width:${this.previewWidth}px;height:${this.previewHeight}px;`;  				return style; 			} 		}, 		mounted() { 			this.autoFitPreview(480, 640); 			this.initCanvas(); 		}, 		methods: { 			autoFitPreview(width, height) { 				const sifno = uni.getSystemInfoSync(); 				let rate = sifno.windowWidth / width;  				this.previewWidth = width * rate; 				this.previewHeight = height * rate; 				this.previewRate = rate; 				this.frameWidth = width; 				this.frameHeight = height; 			}, 			initCanvas() {  				const that = this; 				const query = uni.createSelectorQuery().in(that); 				query.select('#graphics') 					.fields({ 						node: true, 						size: true 					}) 					.exec((res) => {  						if (utils.isEmptyArray(res)) 							return;  						const canvas = res[0].node; 						const ctx = canvas.getContext('2d'); 						const dpr = uni.getSystemInfoSync().pixelRatio; 						canvas.width = res[0].width * dpr; 						canvas.height = res[0].height * dpr; 						ctx.scale(dpr, dpr);  						that.canvas = canvas; 						that.ctx = ctx;  						that.poseGraphs = new PoseGraphs(ctx, canvas.width, canvas.height, 1); 						that.poseGraphs.lineColor = "#FF8E148C";//线条颜色  					}); 			},  			async detection(frame) {  				const human = await humanDetection.detectionAsync(frame); 				//无结果 				if (!human) 					this.poseGraphs.clear(); 				else 					this.poseGraphs.drawing(human.keypoints);  			},  			initVideo() {  				if (this.camera) 					return;  				const that = this; 				this.camera = new CameraDevice(); 				this.camera.onFrame = frame => {  					that.fps = that.camera.fps;  					//重新自适应 					if (frame.width != that.frameWidth || frame.height != that.frameHeight) { 						that.autoFitPreview(frame.width, frame.height); 						that.initCanvas(); 					}  					that.detection(frame); 				}; 			} 		} 	} </script>  <style lang="scss"> 	.human-detection { 		width: auto; 		height: auto;  		.preview { 			margin: auto; 			width: 480px; 			height: 640px; 		}  		.graphs { 			position: absolute; 			top: 0; 			left: 0; 			z-index: 9999; 			box-shadow: 0 0 14.4928rpx #CCC; 			background-color: rgba(0, 0, 0, 0.01); 		} 	} </style> 

三、注意事项

小程序的抽帧图像大小与camera实时图像可能不一致（https://developers.weixin.qq.com/miniprogram/dev/component/camera.html#Bug-Tip)，所以camera和canvas组件必须保持与帧图像保持同比缩放，否则可能导致骨骼与实时图像不一致。

下篇我们将为您介绍如何进行运动分析，敬请期待...