VUE3中实现游戏摇杆效果

github地址  

 GitHub - yoannmoinet/nipplejs: A virtual joystick for touch capable interfaces.

演示地址

Nipplejs by yoannmoinet 

1.安装nipple

npm install nipplejs --save

 下面是完整的VUE代码

			<el-row> <el-col :span="5">
					<div id="joystick_zone"></div>
				</el-col>

			</el-row>


<script setup lang="ts" name="Camera3DScan">
import { ref, reactive, onMounted, watch } from 'vue'
import axios from 'axios'
 
import * as echarts from 'echarts';
import "echarts-gl"; //3D地图插件
import nipplejs from 'nipplejs'; 

onMounted(() => {

	setTimeout(function () {

		var options = {
			zone: document.getElementById('joystick_zone') as HTMLElement,
			mode: 'static',
			position: {left: '50%', top: '50%'},
			color: 'gray',
		} as const

		var manager = nipplejs.create(options);

		manager.on('dir', function (evt, data) {
			console.log(data)
			// Do something.
		});
	}, 1000) 
})
</script>

 页面效果

扫描二维码关注公众号，回复： 16101882 查看本文章