nipplejs(虚拟游戏操作杆)跟fabric(canvas缩放、旋转)
nipplejs
nipplejs 是由 Yoann Moinet 创建的一个轻量级JavaScript库，它提供了虚拟摇杆的实现，特别适用于触摸屏设备上的交互式应用，如游戏或硬件控制面板。通过这个库，开发者可以轻松地在Web页面上集成可操作的虚拟操纵杆。
npm：https://www.npmjs.com/package/nipplejs
实现需求：使用操作杆控制物体上下左右进行移动
效果如下：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clip Image to Irregular Polygon</title>
<style>
.front {
background-color: #fff !important;
}
.back {
background-image: url('./j.png') !important;
background-size: cover !important;
}
</style>
</head>
<body>
<div id="joystick-container" style="width: 300px; height: 300px; position: relative;"></div>
<div id="moving-div" style="width: 50px; height: 50px; background-color: red; position: absolute;"></div>
<script src="https://cdn.jsdelivr.net/npm/nipplejs@latest/dist/nipplejs.min.js"></script>
<script>
const options = {
zone: document.getElementById('joystick-container'),
mode: 'static',
size: 100,
position: {
left: '50%',
top: '50%'
},
color: '#999999',
};
const manager = nipplejs.create(options);
const movingDiv = document.getElementById('moving-div');
let posX = 0;
let posY = 0;
let distance
let angle
const speedFactor = 0.05;
let autoMoveInterval = null;
const stopAutoMove = () => {
if (autoMoveInterval) {
clearInterval(autoMoveInterval);
autoMoveInterval = null;
}
};
const startAutoMoveRight = () => {
if (!autoMoveInterval) {
autoMoveInterval = setInterval(() => {
posX += Math.cos(angle) * distance;
posY += Math.sin(angle) * distance;
movingDiv.style.transform = `translate(${posX}px, ${-posY}px)`;
}, 10);
}
};
manager.on('start', () => console.log('Start'));
manager.on('move', (evt, data) => {
console.log(data.distance, data.angle.radian)
if (data && data.direction) {
distance = data.distance * speedFactor;
angle = data.angle.radian;
posX += Math.cos(angle) * distance;
posY += Math.sin(angle) * distance;
movingDiv.style.transform = `translate(${posX}px, ${-posY}px)`;
if (data.distance >= 5) {
startAutoMoveRight();
}
}
});
manager.on('end', () => {
console.log('End');
stopAutoMove();
// posX = 0;
// posY = 0;
// movingDiv.style.transform = `translate(${posX}px, ${posY}px)`;
});
</script>
</body>
</html>fabric
Fabric.js是一个可以简化Canvas程序编写的库。 Fabric.js为Canvas提供所缺少的对象模型
官网地址：Fabric.js Javascript Canvas Library
实现需求：可以控制渲染在Canvas内图片缩放、移动跟旋转
效果如下：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clip Image to Irregular Polygon</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.6/fabric.min.js"></script>
<style>
canvas {
border: 1px solid #000;
}
</style>
</head>
<body>
<script>
const canvasElement = document.createElement('canvas');
canvasElement.id = 'myCanvas';
canvasElement.width = 300;
canvasElement.height = 300;
document.body.appendChild(canvasElement);
const canvas = new fabric.Canvas(canvasElement);
// 加载图像并设置裁剪路径
fabric.Image.fromURL('./640.png', function (img) {
img.set({
left: 0,
top: 0,
scaleX: 1,
scaleY: 1,
angle: 0
});
canvas.add(img);
});
</script>
</body>
</html>或者
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clip Image to Irregular Polygon</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.6/fabric.min.js"></script>
<style>
canvas {
border: 1px solid #000;
}
</style>
</head>
<body>
<canvas id="canvasID" width='500' height='500'></canvas>
<script>
const canvas = new fabric.Canvas('canvasID');
// 加载图像并设置裁剪路径
fabric.Image.fromURL('./640.png', function (img) {
img.set({
left: 0,
top: 0,
scaleX: 1,
scaleY: 1,
angle: 0
});
canvas.add(img);
});
</script>
</body>
</html>