nipplejs(虚拟游戏操作杆)跟fabric(canvas缩放、旋转)

来自湖南的阿晨

于 2024-08-27 10:40:13 发布

阅读量638

点赞数 10

分类专栏： Javascript与ES6~ html5 && css3 && 浏览器文章标签：游戏 fabric 前端 javascript

本文链接：https://blog.csdn.net/weixin_52479803/article/details/141454922

版权

Javascript与ES6~ 同时被 2 个专栏收录

49 篇文章 2 订阅

订阅专栏

html5 && css3 && 浏览器

34 篇文章 1 订阅

订阅专栏

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>