ファブリックjsで作成された複数の矩形に異なるIDを追加する方法

こんにちは、私は矩形のドラッグとサイズ変更にfabricjsを使用しています。作業は、ボタンをクリックすると長方形が形成されます。各ボタンのクリックごとに私は各矩形を追加することができます。私は各矩形に異なるスタイルを追加したい。私は各矩形に異なるid/classを追加しようとしています。それは動作していません。これは私のコードですファブリックjsで作成された複数の矩形に異なるIDを追加する方法

<html> 
<head> 
    <script src="fabric.min.js"></script> 
    <style> 
     #c{ 

      background-color:red; 
     } 
    </style> 
</head> 
<body> 
    <canvas id="c"></canvas> 
    <button id="my-image" onclick="myFunction()">click</button> 

    <script> 
     var canvas = new fabric.Canvas('c', { width: 500, height: 400, }); 
     var click = 0; 
     $('#my-image').click(myFunction); 

     function myFunction() { 
      click += 1; 

      var imgElement = document.getElementById('my-image'); 
      var rect = new fabric.Rect({ width: 100, height: 50, fill: 'green' }); 
     rect.setAttribute("class", click); 

      canvas.add(rect); 

      }; 

    </script> 
</body> 
</html>

私のコードで何が間違っていますか？

出典

2016-12-07 aswathy

問題はあなたがjQueryを使用していて、あなたがそれを含んでいないことです。 – Jai

あなたはjQueryのコードを使用しているとして、jQueryライブラリを含める必要があります：

<script src="path/to/jquery.js"></script> 
<script src="fabric.min.js"></script>

と

を使用すると、インラインイベントハンドラonclickを削除することができます。
あなたのコードは要素の下にあるように機能しますが、docレディブロックを作成することはできますが、それを持つとよいでしょう。

出典

2016-12-07 06:21:16 Jai

すでにjquaryライブラリを追加しています。エラーは「Uncaught TypeError：rect.setAttributeは関数ではありません」 – aswathy

@aswathyこれはキャンバス要素の場合は属性を追加する必要があり、これが必要な場合は 'console.log（rect）;を表示する必要があると思いますオブジェクトの場合は、オブジェクト自体にプロパティを設定する必要があります。 – Jai

あなたがall.jsファイルfabric.jsで

に以下のコードを追加することにより、各項目のIDを設定することができますが、バージョン1.3.0ビルドします。オブジェクトの宣言での追加

var object = { 
    id: this.id, 
    remaining properties in all.js 
    }

これで、オブジェクトIDを次のように設定できます。

canvas.getActiveObject().id =あなたのID値。我々はfabric.js

出典

2016-12-07 06:24:15 Helios

今、私はfabric.min.jsしか持っていません、それ以上のファイルが必要ですか？ – aswathy

jqueryコア、jquery UIライブラリは十分だと思うので....... – Helios

jquery-ui.min.jsを持っていることを確認してから試してみてください – Helios

に作成された矩形のために複数のIDを追加し、このようにあなたがエラーのコンソールをチェックしなかったので、

Myid= canvas.getActiveObject().get('id');

：あなたはとオブジェクトIDを取得することができますか？コードを試してみると、 "setAttributeは関数ではありません"というエラーが出ます。おそらくあなたのvar rectはDOMのElementではないので、このメソッドを呼び出すことができます。わずかに変更されたあなたのコードで以下の例では、動作しているようです...私はfabric.js

var canvas = new fabric.Canvas('c', { width: 500, height: 150, }); 
 
var click = 0; 
 

 
$('#my-image').click(myFunction); 
 

 
function myFunction() { 
 
    click += 1; 
 

 
    var imgElement = document.getElementById('my-image'); 
 
    var rect = new fabric.Rect({ width: 100, height: 50, fill: 'green' }); 
 
    $(rect).addClass(click); 
 
    canvas.add(rect); 
 

 
};

#c{background-color:red;}

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.1/fabric.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<canvas id="c"></canvas> 
 
<button id="my-image" onclick="myFunction()">click</button>

についてのバックグラウンドを持っていないが、あなたは独自のクラスを作成するようにさらにそれが見えます新しい矩形の名前。私はクラスではなく、この目的のためにIDを使用します。

出典

2016-12-07 07:34:40 Flyer53

ファブリックjsで作成された複数の矩形に異なるIDを追加する方法

答えて

関連する問題