Question

我在我的html5画布应用程序中使用了fabric.js库。

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

为了实现这一点，我创建了一个具有2个文本的组对象，并且我在父组对象中添加了它。

在'对象：旋转'事件中，我找到内部组并保持角度稳定：

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

请看一下我的小提琴示例：

如果我改变文本的顶部位置，旋转时它们的位置不稳定，我必须将顶部：-5放在第一个文本上，顶部：5放在第二个文本上。如果我将top：-10放在一个文本对象上并且top：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/

Answer 1

您需要通过将top设置为0来将组置于中心：

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

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

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

1 个答案: