Fabricjs-copy和paste
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../fabric.js"></script> <style> .controls { padding: 20px 0px; } .canvas-container { width: 600px; height: 600px; border: 1px dotted #ccc; } </style> </head> <body> <div class="controls"> <h5> 主要通过canvas.getActiveObject().clone实现copy <br /> paste的时候把已clone的对象分别add进canvas </h5> <button onclick="Copy()">Copy selected objecs</button> <button onclick="Paste()">Paste selected objects</button> </div> <div class="canvas-container"> <canvas id="c" width="600" height="600"></canvas> </div> <script> let _clipboard = null function Paste() { if (!_clipboard) { alert('请先copy') return false } _clipboard.clone(function(clonedObj) { canvas.discardActiveObject(); //禁用已选择的活动对象 取消已选择的对象的选择状态 clonedObj.set({ left: clonedObj.left + 10, //设置以下偏移避免重叠 top: clonedObj.top + 10, evented: true }); console.log(clonedObj.type) //rect group activeSelection多选,shift按下选择的 if (clonedObj.type === 'activeSelection') { clonedObj.canvas = canvas clonedObj.forEachObject(function(obj) { canvas.add(obj) }) clonedObj.setCoords() } else { canvas.add(clonedObj) } _clipboard.top += 10 // 防止重复paste导致图形重叠 _clipboard.left += 10 canvas.setActiveObject(clonedObj) //最新paste的元素为选择状态 canvas.requestRenderAll() //更新 防止setCoords之后obj无法选中 }) } function Copy() { if (!canvas.getActiveObject()) { alert('请先选择元素') return false } canvas.getActiveObject() //已选择的对象 可以是对象组,选择多个元素 .clone(function(cloned) { _clipboard = cloned //赋值为全局变量方便paste获取 }) } //以下是基础操作 以上是重点↑ var canvas = this.__canvas = new fabric.Canvas('c') var rect = new fabric.Rect({ left: 100, top: 50, fill: '#D81B60', width: 100, height: 100, strokeWidth: 2, stroke: "#880E4F", rx: 10, ry: 10, angle: 45, hasControls: true }); canvas.add(rect); // create a rectangle object var rect2 = new fabric.Rect({ left: 200, top: 50, fill: '#F06292', width: 100, height: 100, strokeWidth: 2, stroke: "#880E4F", rx: 10, ry: 10, angle: 45, hasControls: true }); canvas.add(rect2); var circle1 = new fabric.Circle({ radius: 65, fill: '#039BE5', left: 0 }); var circle2 = new fabric.Circle({ radius: 65, fill: '#4FC3F7', left: 110, opacity: 0.7 }); var group = new fabric.Group([circle1, circle2, ], { left: 40, top: 450 }); canvas.add(group); </script> </body> </html>
上面注释已经很详细了 偷一下懒