在本教程中,我们将学习如何使用 FabricJS 设置椭圆的高度。椭圆形是 FabricJS 提供的各种形状之一。为了创建一个椭圆,我们将创建一个 Fabric.Ellipse 类的实例并将其添加到画布中。我们可以通过改变椭圆对象的位置、不透明度、描边及其尺寸来操纵椭圆对象。 FabricJS 允许我们使用 width 和 height 属性来控制对象的尺寸。
new fabric.Ellipse({ height: Number }: Object)
选项(可选)- 此参数是一个对象 为我们的椭圆提供额外的定制。使用此参数,可以更改与高度为属性的对象相关的颜色、光标、描边宽度和许多其他属性。
高度 - 此属性接受数字 strong> 允许我们指定对象的高度。分配的值决定高度。
height 属性的默认行为
让我们举个例子来了解 height 属性的默认行为。
<!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 height of an Ellipse using FabricJS?</h2> <p>Here we have set the dimensions of the ellipse by passing the horizonal and vertical radius, <b>rx</b> and <b>ry</b>. We have not used the <b>height</b> property. </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: 100, top: 100, fill: "white", rx: 100, ry: 60, stroke: "#c154c1", strokeWidth: 5, }); // Adding it to the canvas canvas.add(ellipse); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); </script> </body> </html>
将 height 属性作为键传递
由于椭圆的尺寸由其水平和高度决定垂直半径,其大小不会有任何变化。
<!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 height of an Ellipse using FabricJS?</h2> <p>There is no change in the dimensions of the ellipse even though we have used the <b>height</b> property. This is because the dimensions are controlled by the horizontal and vertical radius, <b>rx</b> and <b>ry</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({ top: 100, left: 100, fill: "white", rx: 100, ry: 60, height: 90, stroke: "#c154c1", strokeWidth: 5, }); // Adding it to the canvas canvas.add(ellipse); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); </script> </body> </html>
以上是如何使用 FabricJS 设置椭圆的高度?的详细内容。更多信息请关注PHP中文网其他相关文章!