subjx.js是dom对象拖动、缩放、旋转插件-BFW插件库

subjx.js是dom对象拖动、缩放、旋转插件

js实现对象拖动、缩放、旋转插件

js实现对象拖动、缩放、旋转插件，可以实现海报拖放设计效果

使用方式：

第一步引入bfwone

第二步use插件及css

第三步配置参数

示例如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["subjx", "subjx"], function() {
                // create Observable instance
                const obs = subjx.createObservable();
                const svgOptions = {
                    container: '#svg-container',
                    restrict: '#svg-container',
                    proportions: true,
                    //rotationPoint: true,
                    // themeColor: 'white',
                    each: {
                        resize: true,
                        move: true,
                        rotate: true
                    },
                    snap: {
                        x: 20,
                        y: 20,
                        angle: 25
                    },
                    cursorMove: 'move',
                    cursorRotate: 'crosshair',
                    cursorResize: 'pointer',
                    //...methods
                };


                const svgs = subjx('.drag-svg')
                .drag(svgOptions,
                    obs);

                svgs.forEach(item => {
                    subjx(item.controls).on('blur', () => {
                        item.disable();
                    });
                });

                // double click activating/deactivating the drag method
                subjx('.drag-svg').on('click',
                    e => {
                        if (e.currentTarget.classList.contains('sjx-drag')) return;
                        const xDraggable = subjx(e.currentTarget).drag(svgOptions, obs)[0];
                        // adding event to controls
                        const controls = xDraggable.controls;
                        subjx(controls).on('blur', () => {
                            xDraggable.disable();
                        });
                    });
            });
        });
    </script>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
        }

        .page {
            height: 100vh;
            min-height: 100vh;
            /* background-color: #000000c4; */
        }
    </style>
</head>
<body>
    <div class="page">

        <svg id="svg-container" width="100%" height="100%" transform="scale(1, 1)">
            <rect class="drag-svg" rx="20" ry="20" width="100" height="100" stroke="black"
                fill="transparent" stroke-width="5" transform="matrix(1,0,0,1,0,0)"></rect>
          
         

        </svg>
    </div>
</body>
</html>

官网https://github.com/nichollascarter/subjx