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

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

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

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Fabric.js は DIY ポストカード機能を実装します

<<:  Ubuntu の Docker で mysql5.6 をインストールする方法

>>:  Docker Compose で利用可能な環境変数の詳細な説明

推薦する

Linuxでmore、less、catコマンドを使用してファイルの内容を表示します

Linux では、cat、more、less の各コマンドを使用してファイルの内容を表示できます。c...

ウェブサイトのビジュアルデザインパスはユーザーの習慣に合わせる必要がある

クーパー氏は、一般的に上から下、左から右に向かうユーザーの視覚経路について話しました。優れたビジュア...

CSSカスケーディングメカニズムについての簡単な説明

CSS にカスケード メカニズムがあるのはなぜですか? CSS では、同じ要素の特定のプロパティに同...

EChartsマルチチャート連携機能の実装プロセス

表示するデータが多い場合、1 つのチャートに表示しても効果はよくありません。このとき、2 つのチャー...

透明な入力ボックスにアイコンを追加する HTML コード

最近、弁護士推薦のウェブサイトを作成していたのですが、検索ボックスに問題がありました。検索ボックス内...

mysql8.0.19 winx64バージョンのインストール問題を解決する

MySQL は、スウェーデンの会社 MySQL AB によって開発されたオープンソースの小規模なリレ...

ウェブページ作成のヒントのまとめ

序文この記事は主に、日常の Web ページ制作で遭遇する問題解決スキルの一部をまとめ、皆さんの参考と...

Electronで不規則な形状の透明部分をクリックする実装

目次不規則なフォームの実装透明な部分をクリックする不規則なフォームの実装ここでは円形フォームを実装し...

Windows で Mysql を起動したときに 1067 が表示される場合の解決策

数日前に仕事を始めて、Mysql をインストールしたところ、開くことができました。今日、会社に行った...

Dockerfileを使用してDockerイメージを構築する

目次Dockerfileを使用してDockerイメージを構築する1. Dockerfile とは何で...

コードをセマンティックにする HTML のヒント

HTML のセマンティクスはありふれた問題のようです。Google で検索すると、セマンティクスに関...

MySQL 5.7 のインストールと設定のチュートリアル

この記事では、参考までにMySQLのインストールと設定のチュートリアルを紹介します。具体的な内容は次...

UIエンジニアのキャリアについての私たちの考え

私は長い間落ち込んでいます、なぜでしょうか?以前、お客様から、提供されたソフトウェアが正常に動作しな...

Alibaba Cloud イメージリポジトリを使用して外部 Docker イメージを構築する方法の詳細な説明

Alibaba Cloud Image Repositoryを使用して外部イメージをダウンロードする...

MySQLクエリキャッシュに関するヒント

目次序文QueryCache の概要クエリキャッシュ構成QueryCache の使用queryCac...