js实现在线海报banner设计中的任意元素拖放缩放旋转效果
现在网上有很多的在线海报及banner制作工具,选择模板,然后修改数据,就可快速的制作一张海报或banner,那么用js如何实现这样的功能呢,其实很简单,我们用一款插件就可以解决。
今天介绍的是一款叫subjx.js的强大插件,先看看效果
github地址:https://github.com/nichollascarter/subjx
是不是很强大,我们看看代码如何实现,当鼠标点击元素的时候变成可编辑,当失去焦点后又变成原始状态,完整的示例代码如下:
<!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>
网友评论0