js实现在线海报banner设计中的任意元素拖放缩放旋转效果

js实现在线海报banner设计中的任意元素拖放缩放旋转效果

js实现在线海报banner设计中的任意元素拖放缩放旋转效果

现在网上有很多的在线海报及banner制作工具,选择模板,然后修改数据,就可快速的制作一张海报或banner,那么用js如何实现这样的功能呢,其实很简单,我们用一款插件就可以解决。

今天介绍的是一款叫subjx.js的强大插件,先看看效果

js实现在线海报banner设计中的任意元素拖放缩放旋转效果

是不是很强大,我们看看代码如何实现,当鼠标点击元素的时候变成可编辑,当失去焦点后又变成原始状态

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone"  type="text/javascript" src="http://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>

{{collectdata}}

网友评论0

阿里云香港主机,免备案大优惠 打开浏览器开发html,体验云开发的乐趣bfweditor 打开浏览器即可开发php,bfwstudio
其他文章