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