语法new fabric.ellipse({ angle: number, centeredrotation: boolean }: object)
参数选项（可选）- 此参数是一个对象 为我们的椭圆提供额外的定制。使用此参数可以更改与画布相关的颜色、光标、描边宽度和许多其他属性，其中角度和centeredrotation是属性。
选项键角度 - 此属性接受数字 指定椭圆的旋转角度（以度为单位）。
centeredrotation - 这属性接受一个布尔值，该值确定椭圆的中心是否是变换的原点。
示例 1传递 angle 作为具有自定义值的键，并禁用椭圆的居中旋转
让我们举个例子，在 fabricjs 中设置椭圆的旋转角度。负角度指定逆时针方向，而正角度指定顺时针方向。由于我们为centeredrotation分配了一个“false”值，因此椭圆将在使用其角点作为旋转中心的同时进行旋转。
<!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>how to set the angle of rotation of an ellipse using fabricjs?</h2> <p>select the object and rotate it. here we have set the angle of rotation at <b>-40</b></p> <canvas id="canvas"></canvas> <script> // initiate a canvas instance var canvas = new fabric.canvas("canvas"); // initiate an ellipse instance var ellipse = new fabric.ellipse({ left: 180, top: 180, rx: 90, ry: 50, fill: "green", stroke: "blue", strokewidth: 2, angle: -40, centeredrotation: false }) // adding it to the canvas canvas.add(ellipse); canvas.setwidth(document.body.scrollwidth); canvas.setheight(250); </script> </body></html>
示例 2启用椭圆居中旋转
从这个示例中我们可以看出，通过设置 centeredrotation 属性为“true”，我们的椭圆现在使用其中心作为旋转中心。在版本 1.3.4 之前，centeredscaling 和 centeredrotation 包含在一个名为 centertransform 的属性中。
<!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>how to set the angle of rotation of an ellipse using fabricjs?</h2> <p>select the object and rotate it. you will notice that the object rotates around its center as we have set the <b>centeredrotation</b> property to true. </p> <canvas id="canvas"></canvas> <script> // initiate a canvas instance var canvas = new fabric.canvas("canvas"); // initiate an ellipse instance var ellipse = new fabric.ellipse({ left: 180, top: 180, rx: 90, ry: 50, fill: "green", stroke: "blue", strokewidth: 2, angle: -40, centeredrotation: true }); // adding it to the canvas canvas.add(ellipse); canvas.setwidth(document.body.scrollwidth); canvas.setheight(250); </script> </body></html>
以上就是如何使用 fabricjs 设置椭圆的旋转角度？的详细内容。