キャンバス操作プラグイン fabric.js の使い方を詳しく解説

//1: キャンバス上のすべてのオブジェクトを取得します。
var items = canvas.getObjects();

//2: キャンバス上のオブジェクトをアクティブ オブジェクトとして設定します。
キャンバスにアイテムをセットします。

//3: キャンバス上のアクティブなオブジェクトを取得する canvas.getActiveObject()

//4: キャンバス内のすべてのオブジェクトの選択を解除します。
キャンバスを破棄します。

//5: キャンバス内のオブジェクトのプロパティ値（0番目のオブジェクトのIDなど）を設定します。
var items = canvas.getObjects();
items[0].id = "items_id0" または items[0].set("id","items_id0")

//6: キャンバス内のオブジェクトのプロパティ（0番目のオブジェクトのIDなど）を取得します。
var items = canvas.getObjects();
アイテム[0].id;
//またはitems[0].get("id");

//7: キャンバスを再レンダリングします。キャンバス内のオブジェクトが変更された場合、この操作は最後の表示時に 1 回実行する必要があります。canvas.renderAll()

//8: キャンバス内のすべてのオブジェクトをクリアします。
キャンバスをクリアします。

//9: キャンバス内のアクティブなオブジェクトをクリアします。
 var t = canvas.getActiveObject();
 t && キャンバスを削除します。

//10: キャンバス内のアクティブオブジェクトのレベルを設定します。var t = canvas.getActiveObject();
canvas.sendBackwards(t) // 1 レイヤー下に移動します canvas.sendToBack(t) // 最下レイヤーにジャンプします:
canvas.bringForward(t) // 1レベル上にジャンプ:
canvas.bringToFront(t) // 最上位レイヤーにジャンプします:
//または：
t.sendBackwards();
t.sendToBack();
t.bringForward();
t.前面に持ってくる();

//10: 画像を読み込むときに、指定されたサイズに画像を拡大縮小します。
fabric.Image.fromURL(image_src, function(oImg) {
  oImg.set({
    左:tmp_left、
    トップ:tmp_top,
    中央スケーリング:true、
    コーナーサイズ: 7,
    コーナーカラー: "#9cb8ee",
    transparentCorners: false、
  });
  oImg.scaleToWidth(画像の幅);
  oImg.scaleToHeight(画像の高さ)。
  キャンバスに oImg を追加します。oImg をアクティブオブジェクトとして設定します。
 });

//11: キャンバス内のオブジェクトを選択すると、そのオブジェクトは最上位レイヤーに表示されません。
キャンバスにオブジェクトをスタックする設定を true にします。

// 12: URL 経由でキャンバスに背景画像を追加します var bg_url = "http://www.xxxx.com/...../bg.png"      
fabric.Image.fromURL( bg_url , function(oImg) {
  oImg.set({
  幅: canvas_obj.width、 
  高さ: canvas_obj.height、
  originX: '左'、 
  originY: '上'
  });
  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(); // 注: 上記の設定を有効にするには、座標を設定する必要があります。

//15: オブジェクトが移動する場合、キャンバスの移動制限を超えないようにオブジェクトを制限します 
関数オブジェクト移動(e){
  var obj = e.target;
  obj.currentHeight > obj.canvas.height || obj.currentWidth > obj.canvas.width) の場合 {
      戻る;
   }    
   obj.setCoords();    
    // 左上隅
    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 コーナー
     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();
 // オブジェクトが変更されたときにメソッドを呼び出すことができます。
 関数オブジェクト変更(e) {
  obj = e.target; とします。
  boundingRect を obj.getBoundingRect(true); とします。
  (boundingRect.left < 0の場合
    || 境界矩形.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();
  }それ以外{
  obj.saveState();
}
  }
//17: json オブジェクトが生成されると背景画像が表示されます。
fabric.Image.fromURL( bgImg, function(oImg) {
   oImg.set({
     幅: 400,
     高さ:400,
     左:0,
     上:0,
     originX: '左'、
     originY: '上'、
     不透明度:0
   });
   //toObject メソッドを使用すると、背景画像が表示されます。
   oImg.toObject = (関数(toObject) {
     関数()を返す{
      fabric.util.object.extend(toObject.call(this) を返します。{
        不透明度:1
      });
     };
  })(oImg.toObject); 

 canvas_obj.setBackgroundImage(oImg, canvas_obj.renderAll.bind(canvas_obj));  
}, { crossOrigin: '匿名' });

//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: '左'、
  originY: '上'、
  左: maskLayerLeft、
  上: maskLayerTop、
  幅: マスクレイヤー幅、
  高さ: マスクレイヤー高さ、
  塗りつぶし: 'rgba(0,0,0,0)', 
  ストローク幅:0,
  選択可能: false
});  

クリップマスク.set({
  クリップFor: 'パグ'
});

canvas_obj.add(クリップマスク);                
関数 degToRad(度) {
  度数を返します* (Math.PI / 180);
}   

関数 findByClipName(名前){
  _(canvas_obj.getObjects()).where({ を返します。
    クリップ対象: 名前
  }）。初め（）
}  

canvas_obj.clipByName = 関数(ctx) {
  座標を設定します。
  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、
    クリップオブジェクト幅、
    クリップオブジェクトの高さ
  );
  ctx.closePath();                  
  ctx.restore();
} 
// 呼び出す場所:
//テキストレイヤーのマスクを設定します var t = new fabric.Text("Your Text", {
      id: first_level+"-text-input"+unique_id、
      コーナーサイズ: 7,
      コーナーカラー: "#9cb8ee",
      transparentCorners: false、
      テキスト配置:"center",
      クリップ名: 'パグ',
      クリップする: 関数(ctx) { 
      _.bind(tmp_canvas_obj.clipByName, t)(ctx) を返します。 
      }
});
// 画像レイヤーのマスクを設定します:
// キャンバスにフォントイメージを追加します
fabric.Image.fromURL(image_src, function(oImg) {
  oImg.set({
    id:first_level+"-image-input"+unique_id、
    左:tmp_left、
    トップ:tmp_top,
    中央スケーリング:true、
    コーナーサイズ: 7,
    コーナーカラー: "#9cb8ee",
    transparentCorners: false、
    クリップ名: 'パグ',
    クリップする: 関数(ctx) { 
      _.bind(tmp_canvas_obj.clipByName, oImg)(ctx) を返します。 
    }

  });

//19: 生成された画像は指定されたサイズに拡大縮小されます。
  oImg.scaleToWidth(画像の幅);
  oImg.scaleToHeight(画像の高さ)。

//20: オブジェクトに id 属性を追加します。
  oImg.toObject = (関数(toObject) {
       関数()を返す{
        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: '匿名' });
tmp_canvas_obj.renderAll();