事件

amanisky · Nov 28, 2018 · dd181a5 · dd181a5
1 parent ef62e77
commit dd181a5
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 12 deletions.
diff --git a/01.html b/01.html
@@ -4,7 +4,7 @@
  <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>1、text、itext、textbox</title>
+ <title>01、text、itext、textbox</title>
 </head>
 <body>
 <button id="sup">上标</button>

diff --git a/02.html b/02.html
@@ -0,0 +1,41 @@
+<!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>02、事件</title>
+ <style>
+ #drag-me {
+ display: inline-block;
+ width: 100px;
+ background-color: purple;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+<div id="drag-me" draggable="true" ondragstart="event.dataTransfer.setData('text/plain', '')">拖动我去画布</div>
+<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');
+ canvas.setWidth(500)
+ canvas.setHeight(500)
+ canvas.setBackgroundColor('red')
+ canvas.on('dragenter', function (opt) {
+ console.log('div 进入画布', opt)
+ });
+ canvas.on('dragover', function (opt) {
+ console.log('div 在画布上方', opt)
+ });
+ canvas.on('dragleave', function (opt) {
+ console.log('div 离开画布', opt)
+ });
+ canvas.on('drop', function (opt) {
+ console.log('div 在画布中放下', opt)
+ });
+</script>
+</body>
+</html>
diff --git a/README.md b/README.md
@@ -1,8 +1,53 @@
+### Object
++ transparentCorners 控件是否透明
+
 ### Canvas
 + 方法
  + getActiveObject() 获取画布上的选中对象
  + getActiveObjects() 获取画布上选中的多个对象
+ + requestRenderAll() 
+ + renderAll() 呈现顶部画布和辅助容器画布（同步操作）
+ + setWidth()
+ + setHeight()
+ + setBackgroundColor()
++ 事件
+ + 对象变化
+ + object:moving 当画布上有对象移动时触发
+ + object:moved 当画布上对象移动完成后触发
+ + object:scaling 当画布上有对象缩放时触发
+ + object:rotating 当画布上有对象旋转时触发
+ + object:scaled 当画布上对象缩放完成后触发
+ + object:rotated 当画布上对象旋转完成后触发
+ + before:transform 当点击画布上对象就会触发（转换之前触发）
+ + object:modified 对象发生变化后触发
+ + object:added 对象被添加到画布后触发
+ + object:removed 对象从画布移除后触发
+ + after:render canvas 画布被重新渲染之后触发
+ + object:skewing -------
+ + object:skewed --------
+ + 选区变化
+ + before:selection:cleared 清除选区之前触发
+ + selection:cleared 选区被清除后触发
+ + selection:created 选取被创建时触发
+ + selection:updated 选区更新后触发（按住 shift 可添加或移除选区中对象）
+ + 鼠标事件
+ + mouse:up:before 当鼠标在画布弹起前触发
+ + mouse:up 当鼠标在画布弹起触发
+ + mouse:down:before 当鼠标在画布上按下前触发
+ + mouse:down 当鼠标在画布上按下触发
+ + mouse:move:before 当鼠标在画布上移动前触发
+ + mouse:move 当鼠标在画布上移动触发
+ + mouse:dblclick 在画布上双击鼠标触发
+ + mouse:wheel 在画布上滚动鼠标滚轮触发
+ + mouse:over 当鼠标移动到对象上方时触发
+ + mouse:out 当鼠标移出对象时触发
+ + 拖拽事件
+ + dragenter 画布之外的某元素进入画布时触发
+ + dragover 画布之外的某元素在画布上方时触发
+ + dragleave 画布之外的某元素离开画布时触发
+ + drop 某元素在画布内放下时触发
 
+
 ### Text、IText、Textbox
 + 区别
  + Text 不可输入
@@ -17,4 +62,7 @@
  + removeStyle() 移除指定属性样式
 
 ### 参考链接
++ 01、对选中文字处理：上标、下标、清除
++ 02、
+
 + canvas自适应屏幕大小：https://www.cnblogs.com/mihoutaoguniang/p/5998511.html
diff --git a/template.html b/template.html
@@ -5,17 +5,14 @@
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
- <link rel="stylesheet" href="styles/app.css">
 </head>
 <body>
- <canvas id="c"></canvas>
- <script src="bower_components/fabric.js/dist/fabric.js"></script>
- <script>
- var canvas = new fabric.Canvas('c', {
- width: 500,
- height: 300,
- backgroundColor: '#eee'
- })
- </script>
+<canvas id="c"></canvas>
+<script src="./bower_components/jQuery/dist/jquery.js"></script>
+<script src="./bower_components/fabric.js/dist/fabric.js"></script>
+<script>
+ fabric.Object.prototype.transparentCorners = false;
+ var canvas = new fabric.Canvas('c', { width: 500, height: 300, backgroundColor: '#ccc' });
+</script>
 </body>
-</html>
+</html>