fabricjs相关方法知识点

fabricjs相关方法知识点

1: 获得画布上的所有对象：

var items = canvas.getObjects();

2: 设置画布上的某个对象为活动对象。

canvas.setActiveObject(items[i]);

3：获得画布上的活动对象

canvas.getActiveObject()；

4：取消画布中的所有对象的选中状态。

canvas.discardActiveObject(); // 如果这样不生效，可以使用 canvas.discardActiveObject().renderAll();

5: 设置画布中的对象的某个属性值，比如第 0 个对象的 id

var items = canvas.getObjects(); tems[0].id ="items_id0" 或 items[0].set("id","items_id0")

6：获得画布中对象的某个属性，比如 第0 个对象的 id

var 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();

11：加载图片时图片缩放到指定的大小。

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); });

12：当选择画布中的对象时，该对象不出现在顶层。

canvas.preserveObjectStacking = true; // 选中对象不会到最高层，按原层次摆放

13：为画布通过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)); }); 

14: originx: originy:代表坐标系。

15: 画布对象居中设置：

var t = canvas.getActiveObject(); t.center(); //全部居中 t.centerH(); //水平居中 t.centerV(); //垂直居中 t.setCoords(); //注：必须设coords以上设置才会有效。

16: 当对象移动时 限制对象的 不超出画布

// 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); 　　} }

17：当画布对象放大时限制其操出边界：

//注意当创建对象到画布上时必须先加上： 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(); 　　} }

18:当生成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' });

19：创建蒙版层

//获取蒙版位置属性（非必要）： 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 canvas fabric.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) } }); //生成的图片缩放到指定的尺寸。 oImg.scaleToWidth(image_width); oImg.scaleToHeight(image_height); //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(); 

 20保存、撤销、重做

this.state = { saveLen: 0, delLen: 0, operIndex: -1, saveOperateList: [], deleteOperateList: [], } // 操作保存的数据 operateData = () => { const { canvas, delLen, saveLen, deleteOperateList, saveOperateList, operIndex } = this.state; let delList = [...deleteOperateList]; let saveList = [...saveOperateList]; let operindex = operIndex; const json = canvas.toJSON(); if (delLen > 0) { //delList.some(item => { // saveList[item].del = true; //}) // saveList = saveList.filter(item => { //return !item.del; // }) delList = []; saveList.push(json); operindex = saveList.length - 1; } else { saveList.push(json); operindex += 1; } this.setState({ saveOperateList: saveList, deleteOperateList: delList, delLen: delList.length, saveLen: saveList.length, operIndex: operindex }) } // 上一步 prevStepOperate = () => { const { canvas, delLen, saveLen, deleteOperateList, saveOperateList, operIndex } = this.state; let delList = [...deleteOperateList]; let saveList = [...saveOperateList]; let operindex = operIndex; if (operindex > 0) { canvas.loadFromJSON(saveList[operindex - 1]).renderAll(); if (delList.includes(operindex - 1)) { } else { delList.push(operindex); operindex -= 1; } } this.setState({ saveOperateList: [...saveList], deleteOperateList: [...delList], delLen: delList.length, saveLen: saveList.length, operIndex: operindex }) } // 下一步 nextStepOperate = () => { const { canvas, delLen, saveLen, deleteOperateList, saveOperateList, operIndex } = this.state; let delList = [...deleteOperateList]; let saveList = [...saveOperateList]; let operindex = operIndex; if (operindex + 1 >= saveList.length) { return; } canvas.loadFromJSON(saveList[operindex + 1]).renderAll(); if (delList.includes(operindex + 1)) { const index = delList.indexOf(operindex + 1); delList.splice(index, 1); } else { } operindex = operindex + 1; this.setState({ saveOperateList: [...saveList], deleteOperateList: [...delList], delLen: delList.length, saveLen: saveList.length, operIndex: operindex }) }

21fabric.js添加自定义属性且不丢失

// 添加图片到canvas addImgInstance = (target, scale, id) => { const { canvas } = this.state; let imgInstance = new fabric.Image(target, { left: 0, top: 0, scaleX: scale.x, scaleY: scale.y, id: id, // 添加自定义属性 }); // 添加自定义属性 imgInstance.toObject = (function(toObject) { return function() { return fabric.util.object.extend(toObject.call(this), { id: id, }); }; })(imgInstance.toObject); canvas.add(imgInstance); }

22fabric.js转化对象时保存自定义属性（重新回到页面时会丢失，需要在toJSON时做处理）

canvas.toJSON(['id']); // id是需要保存的属性

canvas.toJSON(['id', 'id2']); // 保存多个属性