【一步步開發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組件必須保持與幀圖像保持同比縮放，否則可能導致骨骼與實時圖像不一致。

下篇我們將為您介紹如何進行運動分析，敬請期待...