<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(单击"显示角度"按钮。(它应该读取0度，并且确实如此(
2(用鼠标选择两个文本对象(" text1"one_answers" text2"(。
3(向右侧旋转选定的组90度。
4(单击画布以取消选择文本框组。
5(单击"显示角度"按钮。(它应该读取90度，并且确实如此(
6(用鼠标选择两个文本对象(" text1"one_answers" text2"(。
7(向左旋转选定的组90度。
8(单击画布以取消选择文本框组。
9(单击"显示角度"按钮。(它应该读取0度，而是读取-1.403418597069752E -14度(
从现在开始，所有角度通过组旋转时都关闭了 - 为什么对象的角度显示-1.4033418597069752E -14度，而不是0度，而不是0度。注意：此代码使用Snapthreshold：45和一个快照：90，所以我不会认为这会发生。当我单独旋转对象时，角度纠正了自己。我尝试使用setcoords((没有运气。任何帮助或建议将不胜感激。
该问题由Andrea Bogazzi于2017年4月24日与GitHub提交https://github.com/fabricjs/fabric.js/commit.51a24b497332a4b497332a4ffbcad82fe72fe7ffe7f1af1a1a1eb037418777777777777777777777777777777777777777777.
旧面料。
_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();
},
new Fabric。
_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;
}
}
});
});