當我旋轉組對象時如何保持穩定的對象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

回答

相關問題