当我旋转组对象时如何保持稳定的对象fabric.js

我为我的html5 canvas应用程序使用fabric.js库。当我旋转组对象时如何保持稳定的对象fabric.js

我创建了一组对象，我需要有稳定的文本对象（稳定的位置），而我旋转组对象。

为了实现这个目标，我创建了一个包含2个文本的组对象，并将其添加到父组对象中。

的“对象：旋转”事件，我发现里面组和我保持角度稳定：

if (obj.type == 'group'){    
     obj.angle = -actObj.angle; 
     actObj.setCoords(); 
     canvas.renderAll(); 
    }

，请在我的小提琴例子看看：

如果我改变文本的顶部位置，当它们旋转时，它们的位置不稳定，我必须在第一个文本中放置top：-5，在第二个文本中放置top：5。如果我把顶部：-10的一个文本对象和顶部上：在其他0，他们不是在旋转稳定

var text = new fabric.Text(N, { 
    fontSize: fontSizeTable, 
    fontWeight: 'bold', 
    originX: 'center', 
    originY: 'center', 
    top: -5, 
    fill: 'black' 
}); 

text2 = new fabric.Text('table name rotonta', { 
    fontSize: fontSizeTable, 
    fontWeight: 'bold', 
    originX: 'center', 
    originY: 'center', 
    top: 5, 
    fill: 'black' 
});

我的jsfiddle例子是在这里：http://jsfiddle.net/tornado1979/x5q34etw/55/

来源

2015-04-01 Theo Itzaris

您需要把该组中的中心通过设定顶部0：

var textsGroup = new fabric.Group(texts, { 
     originX: 'center', 
     originY: 'center', 
     top:0, 
     objectGroupType: 'texts' 
});

更新小提琴：http://jsfiddle.net/x5q34etw/63/

来源

2015-04-05 07:30:35

当我旋转组对象时如何保持稳定的对象fabric.js

回答

相关问题