fabric.js是一個很好用的 canvas 操作插件，下面整理了一些平時項目中用到的知識點：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
|
//1: 獲得畫布上的所有對象：var items = canvas.getObjects();//2: 設置畫布上的某個對象為活動對象。canvas.setActiveObject(items[i]);//3：獲得畫布上的活動對象canvas.getActiveObject()//4：取消畫布中的所有對象的選中狀態。canvas.discardActiveObject();//5: 設置畫布中的對象的某個屬性值，比如第 0 個對象的 idvar items = canvas.getObjects();tems[0].id ="items_id0" 或 items[0].set("id","items_id0")//6：獲得畫布中對象的某個屬性，比如 第0 個對象的 idvar items = canvas.getObjects();items[0].id;//或items[0].get("id");//7: 重新渲染一遍畫布，當畫布中的對象有變更，在最后顯示的時候，需要執行一次該操作canvas.renderAll()//8: 清除畫布中所有對象：canvas.clear();//9:清除畫布中的活動對象： var t = canvas.getActiveObject(); t && canvas.remove(t);//10: 設置活動對象在畫布中的層級var t = canvas.getActiveObject();canvas.sendBackwards(t) //向下跳一層canvas.sendToBack(t) //向下跳底層：canvas.bringForward(t) //向上跳一層：canvas.bringToFront(t) //向上跳頂層：//或者：t.sendBackwards();t.sendToBack();t.bringForward();t.bringToFront();//10：加載圖片時圖片縮放到指定的大小。fabric.Image.fromURL(image_src, function(oImg) { oImg.set({ left:tmp_left, top:tmp_top, centeredScaling:true, cornerSize: 7, cornerColor: "#9cb8ee", transparentCorners: false, }); oImg.scaleToWidth(image_width); oImg.scaleToHeight(image_height); canvas.add(oImg).setActiveObject(oImg); });//11：當選擇畫布中的對象時，該對象不出現在頂層。canvas.preserveObjectStacking = true;// 12：為畫布通過URL方式添加背景圖片var bg_url = "http://www.xxxx.com/...../bg.png" fabric.Image.fromURL( bg_url , function(oImg) { oImg.set({ width: canvas_obj.width, height: canvas_obj.height, originX: 'left', originY: 'top' }); canvas_obj.setBackgroundImage(oImg, canvas_obj.renderAll.bind(canvas_obj));});//13: originx: originy:代表坐標系。 |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
|
//14: 畫布對象居中設置：var t = canvas.getActiveObject();t.center(); //全部居中t.centerH(); //水平居中t.centerV(); //垂直居中t.setCoords(); //注：必須設coords以上設置才會有效。//15: 當對象移動時 限制對象的 不超出畫布// canvas moving limit function objectMoving(e){ var obj = e.target; if(obj.currentHeight > obj.canvas.height || obj.currentWidth > obj.canvas.width){ return; } obj.setCoords(); // top-left corner if(obj.getBoundingRect().top < 0 || obj.getBoundingRect().left < 0){ obj.top = Math.max(obj.top, obj.top-obj.getBoundingRect().top); obj.left = Math.max(obj.left, obj.left-obj.getBoundingRect().left); } // bot-right corner if(obj.getBoundingRect().top+obj.getBoundingRect().height > obj.canvas.height || obj.getBoundingRect().left+obj.getBoundingRect().width > obj.canvas.width){ obj.top = Math.min(obj.top, obj.canvas.height-obj.getBoundingRect().height+obj.top-obj.getBoundingRect().top); obj.left = Math.min(obj.left, obj.canvas.width-obj.getBoundingRect().width+obj.left-obj.getBoundingRect().left); }}//16：當畫布對象放大時限制其操出邊界：//注意當創建對象到畫布上時必須先加上： obj.saveState(); //在對象修改時方法里就可以調用了。 function objectModified (e) { let obj = e.target; let boundingRect = obj.getBoundingRect(true); if (boundingRect.left < 0 || boundingRect.top < 0 || boundingRect.left + boundingRect.width > obj.canvas.getWidth() || boundingRect.top + boundingRect.height > obj.canvas.getHeight()) { obj.top = obj._stateProperties.top; obj.left = obj._stateProperties.left; obj.angle = obj._stateProperties.angle; obj.scaleX = obj._stateProperties.scaleX; obj.scaleY = obj._stateProperties.scaleY; obj.setCoords(); obj.saveState(); }else{ obj.saveState();} }//17:當生成json對象時，背景圖片顯示出來。fabric.Image.fromURL( bgImg, function(oImg) { oImg.set({ width: 400, height:400, left:0, top:0, originX: 'left', originY: 'top', opacity:0 }); //當toObject方法時顯示背景圖片。 oImg.toObject = (function(toObject) { return function() { return fabric.util.object.extend(toObject.call(this), { opacity:1 }); }; })(oImg.toObject); canvas_obj.setBackgroundImage(oImg, canvas_obj.renderAll.bind(canvas_obj)); }, { crossOrigin: 'Anonymous' });//18：創建蒙版層//獲取蒙版位置屬性（非必要）：var maskLayerTop = parseInt($(this).attr("data-top"));var maskLayerLeft = parseInt($(this).attr("data-left"));var maskLayerWidth = parseInt($(this).attr("data-width"));var maskLayerHeight = parseInt($(this).attr("data-height"));//創建蒙版var clipMask = new fabric.Rect({ originX: 'left', originY: 'top', left: maskLayerLeft, top: maskLayerTop, width: maskLayerWidth, height: maskLayerHeight, fill: 'rgba(0,0,0,0)', strokeWidth:0, selectable: false}); clipMask.set({ clipFor: 'pug'});canvas_obj.add(clipMask); function degToRad(degrees) { return degrees * (Math.PI / 180);} function findByClipName(name){ return _(canvas_obj.getObjects()).where({ clipFor: name }).first()} canvas_obj.clipByName = function(ctx) { this.setCoords(); var clipObj = findByClipName(this.clipName); var scaleXTo1 = (1 / this.scaleX); var scaleYTo1 = (1 / this.scaleY); var skewXReverse = - this.skewX; var skewYReverse = - this.skewY; ctx.save(); var ctxLeft = -( this.width / 2 ) + clipObj.strokeWidth; var ctxTop = -( this.height / 2 ) + clipObj.strokeWidth; var ctxWidth = clipObj.width - clipObj.strokeWidth; var ctxHeight = clipObj.height - clipObj.strokeWidth; ctx.translate( ctxLeft, ctxTop ); ctx.scale(scaleXTo1, scaleYTo1); ctx.transform(1, skewXReverse, skewYReverse, 1, 0, 0); ctx.rotate(degToRad(this.angle * -1)); ctx.beginPath(); ctx.rect( clipObj.left - this.oCoords.tl.x, clipObj.top - this.oCoords.tl.y, clipObj.width, clipObj.height ); ctx.closePath(); ctx.restore();} //調用的地方：//文字層設置蒙版 var t = new fabric.Text("Your Text", { id: first_level+"-text-input"+unique_id, cornerSize: 7, cornerColor: "#9cb8ee", transparentCorners: false, textAlign:"center", clipName: 'pug', clipTo: function(ctx) { return _.bind(tmp_canvas_obj.clipByName, t)(ctx) }});// 圖片層設置蒙版：// add the forntimage to the canvasfabric.Image.fromURL(image_src, function(oImg) { oImg.set({ id:first_level+"-image-input"+unique_id, left:tmp_left, top:tmp_top, centeredScaling:true, cornerSize: 7, cornerColor: "#9cb8ee", transparentCorners: false, clipName: 'pug', clipTo: function(ctx) { return _.bind(tmp_canvas_obj.clipByName, oImg)(ctx) } });//19：生成的圖片縮放到指定的尺寸。 oImg.scaleToWidth(image_width); oImg.scaleToHeight(image_height);//20：to object 時添加 id屬性。 oImg.toObject = (function(toObject) { return function() { return fabric.util.object.extend(toObject.call(this), { id: this.id, }); }; })(oImg.toObject); oImg.id = first_level+"-image-input"+unique_id; oImg.saveState(); tmp_canvas_obj.add(oImg).setActiveObject(oImg);}, { crossOrigin: 'Anonymous' });tmp_canvas_obj.renderAll(); |
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。
原文鏈接：https://blog.csdn.net/daicooper/article/details/79800718
