六、人体骨骼图绘制

<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>