根据图形边界判断是否与另一个图形相交

amanisky · Nov 30, 2018 · 4ad2114 · 4ad2114
1 parent 3493f13
commit 4ad2114
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 1 deletion.
diff --git a/08.html b/08.html
@@ -0,0 +1,35 @@
+<!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>08、根据图形边界判断是否与另一个图形相交</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({ width: 100, height: 100, fill: '#7fe37f' });
+ var circle = new fabric.Circle ({ radius: 50, left: 275, top: 75, fill: '#ff7f7f' });
+ var triangle = new fabric.Triangle({ width: 100, height: 100, left: 50, top: 120, fill: 'orange' });
+ canvas.add(rect, circle, triangle);
+ canvas.on({
+ 'object:moving': onChange,
+ 'object:scaling': onChange,
+ 'object:rotating': onChange
+ });
+ function onChange (opt) {
+ // 重新绘制对象的控件
+ opt.target.setCoords();
+ canvas.forEachObject(function(obj) {
+ if (obj === opt.target) return;
+ var isIntersect = opt.target.intersectsWithObject(obj);
+ obj.set('opacity', isIntersect ? 0.5 : 1);
+ });
+ }
+</script>
+</body>
+</html>
diff --git a/README.md b/README.md
@@ -88,9 +88,36 @@
 + 05、复制粘贴
 + 06、选区转组、组转选区
 + 07、**图形变换了，controls 也得做相应变换**
++ 08、根据图形边界判断是否与另一个图形相交
 
 ### 重点
-+ 图形变换了，controls 也得做相应变换；否则就会出现错位；
++ 图形变换了，controls 也得做相应变换；否则就会出现错位
+
+### 官方示例
++ 字体上标、下标
+ + http://fabricjs.com/super-sub-script
++ 事件
+ + http://fabricjs.com/events
++ 复制、粘贴
+ + http://fabricjs.com/copypaste
++ 选区管理
+ + 选区 -> 组
+ + 组 -> 选区
+ + 设置默认选区
+ + 全选
+ + 丢弃选区
+ + http://fabricjs.com/manage-selection
++ 矩阵转换
+ + http://fabricjs.com/matrix-transformation
++ 自定义控件
+ + http://fabricjs.com/controls-customization
++ 独立控件
+ + http://fabricjs.com/controls
++ 自由绘图
+ + http://fabricjs.com/freedrawing
++ 图形边界交叉处理
+ + http://fabricjs.com/intersection 
+
 
 ### 参考链接
 + 什么时候需要调用 setCoords 方法