3

イメージとテキストの組み合わせを含み、1 つのグループとして動作するグループを作成したいのですが、それを行うと、次のようになります。

https://gist.github.com/1682293

そのグループを移動できません。それを機能させるには、最初に画像とテキストをキャンバスに追加し、次にこれらの画像とテキストでグループを作成してから、個別に追加された画像とテキストを削除する必要があります。

私はそこで何が間違っていますか？

4

2 に答える 2

2

これは、fabric.jsの最新バージョンで修正されたようです。バージョン0.9.15で動作させることができました：

function drawImage(name, left, top) {
    fabric.Image.fromURL('../nav-host.png', function (img) {
        var oImg = img.scale(4);
        var caption = new fabric.Text(name, {
            fontFamily: 'Arial'
        });
        var group = new fabric.Group([oImg, caption], { left: left, top: top });
        canvas.add(group);
    });
}
于 2012-11-14T15:59:45.370 に答える
0

これを思いついたのは、カウンター スクリプトから動的に生成されるテキストの一部を追加するためです。このコードは、画像とテキストから作成されたグループを追加します。テキストは画像の上に設定され、ボタンをクリックするたびにテキストがキャンバスに追加されて更新されます。そのため、最初にボタンをクリックすると、テキストに Sticky Card #1 と表示されます。次にクリックすると、Sticky card #2 というテキストが表示された 2 番目のグループが表示されます。画像はわずか 30px X 30px でした。

これは、私のページの先頭にあるカウンター スクリプトです。

  $(window).load(function(){
    $('.stickycard').click(function() {
    $('#cardcount').html(function(i, val) { return val*1+1; });
    });
  });

これは、kitchensink.js 内で使用した fabric.js コードです。

if ($(element).hasClass('image1')) {
    fabric.Image.fromURL('toolimg/yellow-stickycard.png', function(img) {

    var yellcard = img.scale(1.0).set({ left: 22, top: 15 }); 

        var cardcount = $('#cardcount').text();

        var sticky = new fabric.Text('Sticky Card #'+ (cardcount), {
            fontSize: 12,
            cornerSize: 6
            });

            var group = new fabric.Group([ sticky, yellcard ], {
            left: 150,
            top: 100,
            cornerSize: 6
            });

             group.set({
             left: left,
             top: top,

             });


        canvas.add(group);

          }); 
    }

これは、ボタンとカウントを表示する div の HTML です。

  <button type="button" class="btn image1 stickycard" id="yellstickycard"><img src="toolimg/yellow-stickycard.png" /></button>
  <div id="cardcount">0</div>
于 2013-12-11T01:21:39.047 に答える