上标下标清除

amanisky · Nov 28, 2018 · 0df7092 · 0df7092
1 parent 95253e1
commit 0df7092
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 3 deletions.
diff --git a/01.html b/01.html
@@ -0,0 +1,69 @@
+<!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>1、text、itext、textbox</title>
+</head>
+<body>
+<button id="sup">上标</button>
+<button id="sub">下标</button>
+<button id="clear">清除</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 canvas = new fabric.Canvas('c', {
+ width: 500,
+ height: 300,
+ backgroundColor: '#ccc'
+ });
+ var text = new fabric.Text('hello world', {
+ fill: 'red',
+ underline: true
+ });
+ var itext = new fabric.IText('hello world', {
+ fill: 'green',
+ top: 80
+ });
+ var textbox = new fabric.Textbox('hello world', {
+ fill: 'blue',
+ top: 150
+ });
+ canvas.add(text, itext, textbox);
+ // 上标
+ $('#sup').click(function () {
+ var active = canvas.getActiveObject();
+ if (!active) return;
+ active.setSuperscript();
+ canvas.requestRenderAll();
+ });
+ // 下标
+ $('#sub').click(function () {
+ var active = canvas.getActiveObject();
+ if (!active) return;
+ active.setSubscript();
+ canvas.requestRenderAll();
+ });
+ // 清除
+ $('#clear').click(function () {
+ var active = canvas.getActiveObject();
+ if (!active) return;
+ // 清除选中对象样式
+ // active.setSelectionStyles({
+ // fontSize: undefined,
+ // deltaY: undefined,
+ // });
+ // 清除对象样式
+ itext.styles = {
+ fontSize: undefined,
+ deltaY: undefined
+ };
+ // itext.removeStyle('fontSize')
+ // itext.removeStyle('deltaY')
+ canvas.requestRenderAll();
+ });
+</script>
+</body>
+</html>
diff --git a/README.md b/README.md
@@ -3,8 +3,9 @@
 ### Canvas 对象方法
 方法名 | 参数 | 返回类型 | 说明
 - | - | - | -
-getActiveObject() | 无 | fabric.Object | 返回当前活动对象（即被选中的对象）
-getActiveObjects() | 无 | fabric.Object | 返回当前活动对象数组
+getActiveObject() | - | fabric.Object | 返回当前活动对象（即被选中的对象）
+getActiveObjects() | - | fabric.Object | 返回当前活动对象数组
+setSelectionStyles() | - | - | 设置当前选择的样式 
 
 ### 属性
 属性名 | 类型 | 说明

diff --git a/bower.json b/bower.json
@@ -12,6 +12,7 @@
  "license": "MIT",
  "private": true,
  "dependencies": {
- "fabric.js": "fabric#^2.4.4"
+ "fabric.js": "fabric#^2.4.4",
+ "jQuery": "^3.3.1"
  }
 }