H5拖拽游戏类基础源码（支持素材移动、缩放、旋转）
2024-05-24 本文已影响0人
非资深技术人
关键字：
H5、素材拖动、素材拖拽、源码、hammer.js、vue2.js；
准备工作：
1、下载插件（hammer.js，vue2.js）
2、开发工具（vscode，http-server）
功能演示：
演示GIF
源码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
<title>演示案例</title>
<style>
* {
padding: 0;
margin: 0;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#container {
position: relative;
width: 100%;
height: 100vh;
background-color: rgb(64, 17, 111);
}
#img-dom {
position: absolute;
background-size: cover;
width: 150px;
height: 150px;
line-height: 150px;
font-size: 36px;
text-align: center;
color: #ffffff;
background-color: rgb(151, 64, 233);
}
</style>
</head>
<body>
<div id="container">
<div id="img-dom">图片</div>
</div>
</body>
<!-- 需下载插件到本地并成功引入 -->
<script src="../hammer.js"></script>
<script src="../vue.min.js"></script>
<script>
new Vue({
el: '#container',
data: {
mc: null,
containerDomeDom: null,
activeDom: null,
activeParams: {
x: 0,
y: 0,
scale: 1,
angle: 0
}
},
mounted() {
this.containerDom = document.getElementById('container');
this.activeDom = document.getElementById('img-dom');
this.mc = new Hammer.Manager(this.containerDom);
this.mc.add(new Hammer.Pan({ threshold: 0, pointers: 0 }));
this.mc.add(new Hammer.Rotate({ threshold: 0 })).recognizeWith(this.mc.get('pan'));
this.mc.add(new Hammer.Pinch({ threshold: 0 })).recognizeWith([this.mc.get('pan'), this.mc.get('rotate')]);
this.mc.on('panstart panmove', this.onPan);
this.mc.on("pinchstart pinchmove", this.onScale);
this.mc.on("rotatestart rotatemove", this.onRotate);
},
methods: {
onPan(event) {
if (event.type == 'panstart') {
this.activeParams.x = parseFloat(this.activeDom.style.left || this.activeParams.x);
this.activeParams.y = parseFloat(this.activeDom.style.top || this.activeParams.y);
}
if (event.type == 'panmove') {
this.activeDom.style.left = this.activeParams.x + event.deltaX + 'px';
this.activeDom.style.top = this.activeParams.y + event.deltaY + 'px';
}
},
onScale(event) {
if (event.type == 'pinchstart') {
this.activeParams.scale = parseFloat(this.activeDom.style.scale || this.activeParams.scale);
}
if (event.type == 'pinchmove') {
var curScale = this.activeParams.scale * event.scale;
if (curScale < 0.3) {
curScale = 0.3; // 控制最小0.3倍
}
if (curScale > 3) {
curScale = 3; // 控制最大3倍
}
this.activeDom.style.scale = curScale;
}
},
onRotate(event) {
if (event.type == 'rotatestart') {
this.activeParams.rotate = parseInt(this.activeDom.style.rotate || this.activeParams.angle);
}
if (event.type == 'rotatemove') {
this.activeDom.style.rotate = event.rotation + this.activeParams.angle + 'deg';
}
}
}
});
</script>
</html>
