修改对象时，会在原来的位置留下虚线框

amanisky · Nov 30, 2018 · 28fdb74 · 28fdb74
1 parent d447eb3
commit 28fdb74
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 2 deletions.
diff --git a/12.html b/12.html
@@ -14,8 +14,9 @@
  var canvas = new fabric.Canvas('c', { width: 500, height: 300, backgroundColor: '#ccc' });
  fabric.util.loadImage('images/bg01.png', function (img) {
  var pattern = new fabric.Pattern({ source: img, repeat: 'repeat' });
- var rect = new fabric.Rect({ width: 400, height: 200, fill: pattern });
- canvas.add(rect);
+ var points = [{ x: 185, y: 0 }, { x: 250, y: 100 }, { x: 385, y: 170 }, { x: 0, y: 245 }];
+ var polygon = new fabric.Polygon(points, { left: 10, top: 10, fill: pattern, objectCaching: false });
+ canvas.add(polygon);
  });
 </script>
 </body>

diff --git a/13.html b/13.html
@@ -0,0 +1,33 @@
+<!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>13、修改对象时，会在原来的位置留下虚线框</title>
+</head>
+<body>
+<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 canvas = new fabric.Canvas('c', { width: 500, height: 300, backgroundColor: '#ccc' });
+var rect = new fabric.Rect({ top: 10, width: 100, height: 100, fill: 'green', strokeWidth: 0 });
+var circle = new fabric.Circle({ left: 110, top: 10, radius: 50, fill: 'orange', strokeWidth: 0 });
+canvas.add(rect, circle);
+canvas.on('after:render', function() {
+ canvas.contextContainer.strokeStyle = 'red';
+ canvas.contextContainer.setLineDash([1, 5]);
+ canvas.forEachObject(function(obj) {
+ var bound = obj.getBoundingRect();
+ canvas.contextContainer.strokeRect(
+ bound.left + 0.5,
+ bound.top + 0.5,
+ bound.width,
+ bound.height
+ );
+ })
+});
+</script>
+</body>
+</html>
diff --git a/README.md b/README.md
@@ -25,6 +25,8 @@
  + setBackgroundImage()
  + setActiveObject('xx') 默认选中某个对象
  + discardActiveObject() 取消选中
+ + getWidth()、setWidth()、getHeight()、setHeight()
+ + setDimensions
 + 属性
  + imageSmoothingEnabled 是否开启图片平滑处理；浏览器中默认开启
  + enableRetinaScaling 启用克隆图像的视网膜缩放
@@ -71,6 +73,8 @@
 + 方法
  + loadImage
  + groupSVGElements
+ + degreesToRadians 度转弧度
+ + getRandomInt 获取随机数
 
 ### Image
 + 方法
@@ -104,6 +108,7 @@
 + 10、网格
 + 11、读取 SVG 文件
 + 12、使用图案填充图形
++ 13、**修改对象时，会在原来的位置留下虚线框**
 
 ### 重点
 + 图形变换了，controls 也得做相应变换；否则就会出现错位