キャンバス操作プラグイン 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 で利用可能な環境変数の詳細な説明

推薦する

Dockerイメージを素早くデプロイして実行する最新のIDEAプロセスの詳細な説明

背景docker とアイデアを使用して、Java Web の開発、展開、運用までのプロセス全体を実現...

Navicat を使用して MySQL データベースをエクスポートおよびインポートする方法

MySql は、私たちが頻繁に使用するデータ ソースです。開発者が練習、小規模なプライベート ゲーム...

Centos システムの指定された場所に Nginx をインストールする方法

Centos システムの指定された場所に Nginx をインストールするにはどうすればいいですか?は...

MySQL 8.0.12 簡単インストールチュートリアル

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

JavaScript でよく使われる 3 つの Web エフェクトの詳細な説明

目次1要素オフセットシリーズ1.1 オフセットの概要1.2 オフセットとスタイルの違い視覚領域クライ...

Alibaba Cloud Centos6.X でメールを送信する際に発生するさまざまな問題

序文: Webサービスを提供するために、Alibabaクラウドホストを新しくインストールしました。す...

Vueはプラグインを使用して画像を比例してカットします

この記事では、プラグインを使用して画像の比例カットを実現するVueの具体的なコードを参考までに共有し...

MAC での MYSQL5.7.17 接続失敗の問題と解決策

MYSQL5.7.17 が MAC で接続できない問題。SQLBench_community 6.3...

MySQL でトリガーを無効化および有効化するチュートリアル [推奨]

MYSQL を使用する場合、トリガーがよく使用されますが、不適切な使用によって問題が発生する場合が...

Vueトップタグ閲覧履歴の実装

目次ナンセンス実装された機能文章要点ナンセンスデモプレビュー実装された機能デフォルトでホームページが...

Docker コンテナのログを表示およびクリーンアップする方法 (テスト済みで効果的)

1. 問題Docker コンテナのログにより、ホストのディスク領域がいっぱいになりました。 doc...

忘れられたボタンタグ

注:この記事は他の人によって翻訳されていますが、考えるべき点が多く、理解しにくい点もあると感じていま...

Reactエラー境界コンポーネント処理

React 16の内容です。最新技術ではありませんが、ドキュメントで調べるまであまり話題に上がらなか...

JSオブジェクトの走査順序の詳細な説明

JavaScript ではオブジェクトを走査する順序は固定されていないと聞いたことがある人もいるかも...

MySQL/MariaDB ルートパスワードリセットチュートリアル

序文パスワードを忘れることは、よく遭遇する問題です。MySQL または MariaDB データベース...