在本教程中,我们将使用 FabricJS 创建一个具有边框颜色的椭圆。椭圆形是 FabricJS 提供的各种形状之一。为了创建一个椭圆,我们将创建一个 Fabric.Ellipse 类的实例并将其添加到画布中。由于 FabricJS 非常灵活,我们可以以任何我们喜欢的方式自定义椭圆对象。 FabricJS 提供的属性之一是 borderColor,它允许我们在对象处于活动状态时操纵边框的颜色。
new fabric.Ellipse({ borderColor: String }: Object)
选项(可选)- 此参数是一个对象 为我们的椭圆提供额外的定制。使用此参数,可以更改与 borderColor 为属性的对象相关的颜色、光标、描边宽度和许多其他属性。
borderColor - 此属性接受一个 String确定主动选择对象时边框的颜色。其默认值为 rgb(178,204,255)。
使用字符串值传递 borderColor 键
让我们看一个如何为 borderColor 属性赋值的示例。我们已将值“blue”分配给 borderColor 键,这有助于在选择椭圆对象时创建蓝色边框。
<!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 create an Ellipse with a border color using FabricJS?</h2> <p>Select the object to see the "blue" border color.</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: 215, top: 100, rx: 90, ry: 50, fill: "red", borderColor: "blue", }); // Adding it to the canvas canvas.add(ellipse); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); </script> </body> </html>
将 rgba 值传递给 borderColor 键
而不是将简单的颜色名称作为字符串传递,我们还可以使用 RGBA 值,其分量指定红色、绿色、蓝色和 Alpha 的数量,其中 alpha 表示不透明度。在此示例中,我们使用了 rgb(128,0,128),它是紫色的 rgb 值。
<!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 create an Ellipse with a border color using FabricJS?</h2> <p>Select the object to see the "purple" border color.</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: 215, top: 100, rx: 90, ry: 50, fill: "red", borderColor: "rgb(128,0,128)", }); // Adding it to the canvas canvas.add(ellipse); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); </script> </body> </html>
以上就是如何使用 FabricJS 创建带有边框颜色的椭圆?的详细内容,更多请关注php中文网其它相关文章!
已抢64941个
抢已抢27408个
抢已抢14898个
抢已抢7424个
抢已抢9291个
抢已抢18726个
抢