在本教程中，我们将学习如何使用 fabricjs拉直图像对象。我们可以通过创建fabric.image的实例来创建一个image对象。既然是一个fabricjs 的基本元素，我们还可以通过应用轻松自定义它诸如角度、不透明度等属性。为了拉直图像对象，我们使用拉直方法。
语法straighten(): fabric.object
在不使用straighten的情况下向角度属性传递值方法示例让我们看一个代码示例，看看当 straighten 时我们的 image 对象看起来如何方法没有被使用。 straighten 方法通过将对象从其所在位置旋转来straighten当前角度为 0、90、180 或 270 等，具体取决于更接近的角度。角度属性设置对象的旋转角度（以度为单位）。在这里，我们指定了角度为 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 image object has an angle of 45 degrees</p> <canvas id=canvas></canvas> <img src=https://www.tutorialspoint.com/images/logo.png id=img1 style=display: none /> <script> // initiate a canvas instance var canvas = new fabric.canvas(canvas); canvas.setwidth(document.body.scrollwidth); canvas.setheight(250); // initiating the image element var imageelement = document.getelementbyid(img1); // initiate an image object var image = new fabric.image(imageelement, { top: 50, left: 110, angle: 45, }); // add it to the canvas canvas.add(image); </script></body></html>
using the straighten 方法示例让我们看一个代码示例，看看当 straighten 时 image 对象是什么样子的方法与角度属性结合使用。虽然我们已经设定了角度旋转为 45 度，我们的图像对象将通过将其旋转回 0 来拉直degree as we have used the 拉直方法。
<!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 image object </p> <canvas id=canvas></canvas> <img src=https://www.tutorialspoint.com/images/logo.png id=img1 style=display: none /> <script> // initiate a canvas instance var canvas = new fabric.canvas(canvas); canvas.setwidth(document.body.scrollwidth); canvas.setheight(250); // initiating the image element var imageelement = document.getelementbyid(img1); // initiate an image object var image = new fabric.image(imageelement, { top: 50, left: 110, angle: 45, }); // add it to the canvas canvas.add(image); // using the straighten method image.straighten(); </script></body></html>
以上就是如何使用 fabricjs 拉直 image 对象？的详细内容。