织物使组保持在同一位置

Question

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();
})

我的意图是当我点击按钮时，它会 select canvas 中的所有文本对象，我得到了朋友的帮助并完成了它，但现在的问题是我想要这个集合这个功能给按钮，但是当我多次点击按钮时组位置跳转，如何让组位置保持在同一个位置？

此处演示https://jsfiddle.net/Tedeee/9m2oxcj6/

Answer 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' 对象）

这是您的 JSFiddle 更新，https://jsfiddle.net/rekrah/9m2oxcj6/2/。

希望对您有所帮助，如果您有任何其他问题，请告诉我。

织物使组保持在同一位置

fabric make group stay at same position

jquery

fabricjs