然而，基于 itext 的 textbox 允许我们调整文本矩形的大小并自动换行。对于 itext 来说情况并非如此，因为高度不会根据换行进行调整。我们可以通过使用各种属性来操作 itext 对象。同样，我们可以使用 straighten 方法拉直 itext 对象。
语法straighten(): fabric.object
示例 1在不使用 straighten 方法的情况下向角度属性传递值
让我们看一个代码示例，看看不使用 straighten 方法时 itext 对象的外观。 straighten 方法通过将对象从当前角度旋转到 0、90、180 或 270 等角度来拉直对象，具体取决于更接近的角度。 angle 属性设置对象的旋转角度（以度为单位）。这里，我们将角度指定为 45 度。但是由于我们没有应用 straighten 属性，因此旋转角度将保持为 45 度。
<!doctype html><html><head> <!-- adding the fabric js library--> <script src=https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js></script></head><body> <h2>passing the angle property a value without using the straighten method</h2> <p>you can see that the itext object has an angle of 45 degrees</p> <canvas id=canvas></canvas> <script> // initiate a canvas instance var canvas = new fabric.canvas(canvas); canvas.setwidth(document.body.scrollwidth); canvas.setheight(250); // initiate an itext object var itext = new fabric.itext(add sample text herelorem ipsum , { width: 300, left: 210, top: 70, fontsize: 30, fill: #b666d2, backgroundcolor: #f8f4ff, angle: 45, }); // add it to the canvas canvas.add(itext); </script></body></html>
示例 2使用拉直方法
让我们看一个代码示例，看看当 straighten 方法与 angle 属性结合使用时，itext 对象是什么样子。虽然我们将旋转角度设置为 45 度，但我们的 itext 对象将通过将其旋转回 0 度来拉直，因为我们使用了 straighten 方法。
<!doctype html><html><head> <!-- adding the fabric js library--> <script src=https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js></script></head><body> <h2>using the straighten method</h2> <p>you can see that the angle of rotation is 0 degree for the itext object</p> <canvas id=canvas></canvas> <script> // initiate a canvas instance var canvas = new fabric.canvas(canvas); canvas.setwidth(document.body.scrollwidth); canvas.setheight(250); // initiate an itext object var itext = new fabric.itext(add sample text herelorem ipsum , { width: 300, left: 210, top: 70, fontsize: 30, fill: #b666d2, backgroundcolor: #f8f4ff, angle: 45, }); // add it to the canvas canvas.add(itext); // using the straighten method itext.straighten(); </script></body></html>
以上就是如何使用 fabricjs 拉直 itext 对象？的详细内容。