fabric.js 知識點整理

fabric.js是一個很好用的 canvas 操作插件，下面整理了一些平時項目中用到的知識點：

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

//2: 設置畫布上的某個對象為活動對象。
canvas.setActiveObject(items[i]);

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

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

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

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

    });

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