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

Question

我为我的 html5 canvas 应用程序使用 fabric.js 库。

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

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

在“object:rotation”事件中，我找到了内部组并保持角度稳定：

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

请看看我的fiddle例子：

如果我更改文本的顶部位置，它们在旋转时位置不稳定，我必须在第一个文本上放置 top:-5，在第二个文本上放置 top: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'
});

已更新 fiddle：http://jsfiddle.net/x5q34etw/63/

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

how to keep stable objects when i rotate a group object fabric.js

object

rotation

html5-canvas

fabricjs