将 fabricjs 对象旋转为选定组后，各个对象角度不正确

Question

<body>
    <button id="showangle" type="button" onclick="showAngle()">Show Angle</button>
    <canvas id="c" width="1000" height="1000" />
</body>


fabric.Object.prototype.set({
  snapThreshold: 45,
  snapAngle: 90
});

var canvas = new fabric.Canvas("c");

var text1 = new fabric.IText("Text 1", {
  name: 'text1',
  fontSize: 30,
  type: 'i-text',
  left: 100,
  top: 100,
});

var text2 = new fabric.IText("Text 2", {
  name: 'text2',
  fontSize: 30,
  type: 'i-text',
  left: 200,
  top: 150,
});

canvas.add(text1);
canvas.add(text2);
canvas.renderAll();


function showAngle() {
  alert("text1 angle = " + text1.getAngle() + "\ntext2 angle = " + text2.getAngle());
}

重现步骤：

1) 运行这个 jsfiddle... http://jsfiddle.net/Outrageous/a50nrcv0/
2) 单击 "Show Angle" 按钮。（应该是 0 度，确实如此）
2) 用鼠标 Select 两个文本对象（"text1" 和 "text2"）。
3) 将选中的组向右旋转 90 度。
4) 点击canvas取消Select文本框组。
5) 单击 "Show Angle" 按钮。（应该是 90 度，确实如此）
6) 用鼠标 Select 两个文本对象（"text1" 和 "text2"）。
7) 将选中的组向左旋转 90 度。
8) 点击canvas取消Select文本框组。
9) 单击 "Show Angle" 按钮。（它应该读取 0 度而不是读取 -1.4033418597069752e-14 度）

从这里开始，通过组旋转时所有角度都关闭了 - 为什么在将对象作为组旋转时，对象的角度显示 -1.4033418597069752e-14 度而不是 0 度。注意：此代码使用 snapThreshold: 45 和 snapAngle: 90，所以我认为这不会发生。当我单独旋转对象时，角度会自行修正。我试过使用 setCoords() 但没有成功。任何帮助或建议将不胜感激。

Answer 1

此问题已由 Andrea Bogazzi 于 2017 年 4 月 24 日通过 github 提交 https://github.com/fabricjs/fabric.js/commit/51a24b497332a4ffbcad82fe7f1a1eb037418747

修复

OLD fabric.js“_calcRotateMatrix”函数：

_calcRotateMatrix: function() {
  if (this.angle) {
     var theta = degreesToRadians(this.angle), cos = Math.cos(theta), sin = Math.sin(theta);
        return [cos, sin, -sin, cos, 0, 0];
     }
  return fabric.iMatrix.concat();
},

新 fabric.js“_calcRotateMatrix”函数已修复：

_calcRotateMatrix: function() { 
  if (this.angle) { 
     var theta = degreesToRadians(this.angle), cos = Math.cos(theta), sin = Math.sin(theta); 
        // trying to keep rounding error small, ugly but it works. 
        if (cos === 6.123233995736766e-17 || cos === -1.8369701987210297e-16) { 
          cos = 0; 
        } 
        return [cos, sin, -sin, cos, 0, 0]; 
     } 
  return fabric.iMatrix.concat(); 
},

替代修复方法是将以下 JS 添加到您的项目中。 . .

// ******* fix for group rotate angle issue  ******
// ************************************************
canvas.on('after:render', function (e) {
    canvas.forEachObject(function (o) {
        var angles = [0, 90, 180, 270, 360];
        var angle = o.angle % 360;
        // normalize angle to positive value
        if (angle < 0) {
            angle = 360 + angle;
        }
        // angles at 360 we will call 0
        if (angle == 360) {
            angle = 0;
        }

        for (var i = 0; i < angles.length; i++) {
            if (angle <= angles[i]) {
                o.angle = angles[i];
                break;
            }
        }
    });
});

将 fabricjs 对象旋转为选定组后，各个对象角度不正确

After rotating fabricjs objects as a selected group the individual object angles are not correct

javascript

angle

object

rotation

fabricjs