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

【问题标题】：how to keep stable objects when i rotate a group object fabric.js当我旋转组对象fabric.js时如何保持稳定的对象
【发布时间】：2015-06-05 23:32:45
【问题描述】：

我将 fabric.js 库用于我的 html5 画布应用程序。

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

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

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

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

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

如果我更改文本的顶部位置，它们在旋转时位置不稳定，我必须将 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/

【问题讨论】：

标签： object rotation html5-canvas fabricjs

【解决方案1】：

您需要通过将 top 设置为 0 将组放在中心：

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

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

【讨论】：