复制和粘贴

amanisky · Nov 28, 2018 · 8ffe5dd · 8ffe5dd
1 parent 525af28
commit 8ffe5dd
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 0 deletions.
diff --git a/05.html b/05.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta http-equiv="X-UA-Compatible" content="ie=edge">
+ <title>05、复制和粘贴</title>
+</head>
+<body>
+<h3>分两步完成复制、粘贴</h3>
+<button id="copy">复制选中对象</button>
+<button id="paste">粘贴</button>
+<h3>一步完成复制、粘贴</h3>
+<button id="clone">克隆选中对象</button>
+<canvas id="c"></canvas>
+<script src="./bower_components/jQuery/dist/jquery.js"></script>
+<script src="./bower_components/fabric.js/dist/fabric.js"></script>
+<script>
+ // 剪切板
+ var clipboard = null;
+ var canvas = new fabric.Canvas('c', { width: 500, height: 300, backgroundColor: '#ccc' });
+ var rect = new fabric.Rect({ top: 30, width: 100, height: 50, fill: 'green' });
+ var circle = new fabric.Circle({ top: 30, left: 130, radius: 50, fill: 'red' });
+ canvas.add(rect, circle);
+ // 默认选中圆
+ canvas.setActiveObject(circle)
+ // 不选中任何对象
+ // canvas.discardActiveObject();
+
+ // 复制
+ $('#copy').click(function () {
+ var active = canvas.getActiveObject();
+ if (!active) return;
+ active.clone(function (cloned) {
+ clipboard = cloned;
+ });
+ });
+
+ // 粘贴
+ $('#paste').click(function () {
+ canvas.add(clipboard);
+ });
+
+ // 复制、粘贴
+ $('#clone').click(function () {
+ var active = canvas.getActiveObject();
+ if (!active) return;
+ active.clone(function (cloned) {
+ cloned.set({
+ left: cloned.left + 10,
+ top: cloned.top + 10
+ });
+ canvas.add(cloned)
+ })
+ });
+</script>
+</body>
+</html>
diff --git a/README.md b/README.md
@@ -11,6 +11,8 @@
  + setHeight()
  + setBackgroundColor()
  + setBackgroundImage()
+ + setActiveObject('xx') 默认选中某个对象
+ + discardActiveObject() 取消选中
 + 属性
  + imageSmoothingEnabled 是否开启图片平滑处理；浏览器中默认开启
  + enableRetinaScaling 启用克隆图像的视网膜缩放