javascript fabricjs - ワンクリックで複数のキャンバスにオブジェクトを追加する

Question

自分の名刺をデザインできるアプリを開発しています。私はワンクリックで2つのキャンバスにオブジェクトを追加する必要があります。ここに私のコードです：

$('#image-list').on('click','.image-option',function(e) { 
     var el = e.target; 
     /*temp code*/ 
     var offset = 50; 
     var left = fabric.util.getRandomInt(0 + offset, 200 - offset); 
     var top = fabric.util.getRandomInt(0 + offset, 400 - offset); 
     var angle = fabric.util.getRandomInt(-20, 40); 
     var width = fabric.util.getRandomInt(30, 50); 
     var opacity = (function(min, max){ return Math.random() * (max - min) + min; })(0.5, 1); 
     var canvasObject; 
     // if ($('#flip').attr('data-facing') === 'front') { 
     // canvasObject = canvas; 
     // } else { 
     // canvasObject = canvas2; 
     // } 

     fabric.Image.fromURL(el.src, function(image) { 
      image.set({ 
       left: left, 
       top: top, 
       angle: 0, 
       padding: 10, 
       cornersize: 10, 
       hasRotatingPoint:true 
      }); 

      canvas.add(image); 
      canvas2.add(image); 
     }); 
    }) 

問題は、私はリサイズや「フロントキャンバス」に画像を移動するとき、それはまた、「バックキャンバス」で同じようにレンダリングする、です。私の場合、私はオブジェクトがそうであることを望んでいません。それで、他のキャンバスで「鏡映」することを防ぐ方法がありますか？ありがとう。

Answer 1

2つのキャンバスに同じオブジェクトを追加することはできません。 2つのオブジェクトを作成する必要があります。

また、ページにHTMLイメージ要素がある場合は、URLから再度読み込む必要はありません。既にロードされているので、イメージ要素を直接コンストラクタに渡してください。

$('#image-list').on('click','.image-option',function(e) { 
    var el = e.target; 
    /*temp code*/ 
    var offset = 50; 
    var left = fabric.util.getRandomInt(0 + offset, 200 - offset); 
    var top = fabric.util.getRandomInt(0 + offset, 400 - offset); 
    var angle = fabric.util.getRandomInt(-20, 40); 
    var width = fabric.util.getRandomInt(30, 50); 
    var opacity = (function(min, max){ return Math.random() * (max - min) + min; })(0.5, 1); 
    var canvasObject; 
    // if ($('#flip').attr('data-facing') === 'front') { 
    // canvasObject = canvas; 
    // } else { 
    // canvasObject = canvas2; 
    // } 

    image = new fabric.Image(el, { 
      left: left, 
      top: top, 
      angle: 0, 
      padding: 10, 
      cornersize: 10, 
      hasRotatingPoint:true 
     }); 

    image2 = new fabric.Image(el, { 
      left: left, 
      top: top, 
      angle: 0, 
      padding: 10, 
      cornersize: 10, 
      hasRotatingPoint:true 
     }); 

     canvas.add(image); 
     canvas2.add(image2); 
    }); 
})