2017-03-24 10 views
2
var canvas = new fabric.Canvas('c'); 

// Add some example shapes 
var circle = new fabric.Circle({ 
    radius: 20, fill: 'green', left: 100, top: 100 
}); 
var triangle = new fabric.Triangle({ 
    width: 20, height: 30, fill: 'blue', left: 50, top: 50 
}); 

canvas.add(circle, triangle); 

// Add some example text 
var text1 = new fabric.Text('hello world', { left: 100, top: 100 }); 

var text2 = new fabric.Text('test', { left: 0, top: 0 }); 

canvas.add(text1, text2); 

// Select all objects 
function selectAllCanvasObjects(){ 
    var objs = canvas.getObjects().filter(function(o) { 
     if (o.get('type') === 'text') { 
      return o.set('active', true); 
     } 
    }); 

    var group = new fabric.Group(objs, { 
     originX: 'center', 
     originY: 'center' 
    }); 

    canvas._activeObject = null; 

    canvas.setActiveGroup(group.setCoords()).renderAll(); 
} 

$(document).on('click', '#change-btn', function(event){ 
selectAllCanvasObjects(); 
}) 

私がボタンをクリックすると、キャンバス内のすべてのテキストオブジェクトが選択されます。これは友人から助けを得て完了しましたが、問題は今ではセットが欲しいですこの機能はボタンにも当てはまりますが、ボタンを複数回クリックするとグループ位置がジャンプしますが、どのようにしてグループポジションを同じ場所に置くことができますか?ここファブリックメイクグループが同じ位置に留まる

デモhttps://jsfiddle.net/Tedeee/9m2oxcj6/

答えて

1

これは(私はあなたの関数の先頭にcanvas.discardActiveGroup()を追加しました)それを修正する必要があります

// Select all text objects 
function selectAllCanvasObjects(){ 
    canvas.discardActiveGroup(); 

    var objs = canvas.getObjects('text').filter(function(o) { 
     return o.set('active', true); 
    }); 

    var group = new fabric.Group(objs, { 
     originX: 'center', 
     originY: 'center' 
    }); 

    canvas._activeObject = null; 

    canvas.setActiveGroup(group.setCoords()).renderAll(); 
} 

(とあなたのを得るために文字列を渡すことができますように私もgetObjects()をクリーンアップ'text' objects)

JSFiddleが更新されました。https://jsfiddle.net/rekrah/9m2oxcj6/2/です。

ご希望の場合は、他にご質問がある場合はお知らせください。