fabric.js是一個很好用的 canvas 操作外掛，下面整理了一些平時專案中用到的知識點：

//1: 獲得畫布上的所有物件：
var items = canvas.getObjects();

//2: 設定畫布上的某個物件為活動物件。
canvas.setActiveObject(items[iwww.cppcns.com]);

//3：獲得畫布上的活動物件
canvas.getActiveObject()

//4：取消畫布中的所有物件的選中狀態。
canvas.discardActiveObject();

//5: 設定畫布中的物件的某個屬性值，比如第 0 個物件的 id
var items = canvas.getIFcYcTRvQ
 
Objects();
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();

//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:代表座標系。

//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,obIFcYcTRvQ
 
j.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-obIFcYcTRvQj.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,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',left: maskLayerLeft,top: maskLayerTop,width: maskLayerWidth,height: maskLayerHeight,fill: 'rgba(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.tranIFcYcTRvQslate( ctxLeft,ctxTop );
  ctx.scale(scaleXTo1,scaleYTo1);
  ctx.transform(1,skewXReverse,skewYReverse,1,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,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,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(); 

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。