数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何在FabricJS中设置线条的边框颜色？
在本教程中，我们将学习如何在FabricJS中设置线条的边框颜色。线条元素是FabricJS提供的基本元素之一，用于创建直线。因为线条元素在几何上是一维的，并且不包含内部，所以它们永远不会被填充。
我们可以通过创建fabric.Line的实例，指定线条的x和y坐标并将其添加到画布上来创建一个线条对象。当我们的对象处于活动状态时，属性borderColor允许我们操作边框的颜色。
语法
new fabric.Line( points: Array, { borderColor: String }: Object)
参数
points − 此参数接受一个数组点，它确定(x1, y1)和(x2, y2)值，分别是线条起点和终点的x轴和y轴坐标。
options (可选) − 此参数是一个对象，它为我们的对象提供额外的自定义选项。使用此参数，可以更改与对象的许多属性相关联的原点、笔划宽度和其他属性，其中borderColor也是一个属性。
选项键
borderColor − 此属性接受一个字符串，用于指定选择线条对象时的边框颜色。其默认值为rgb(178,204,255)。
使用字符串值传递borderColor键
示例
让我们来看一个代码示例，说明如何为borderColor属性赋值。我们将值“red”赋给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>Passing borderColor key with a String value</h2> <p> You can select the line object to see that the border colour is red. </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 a Line object var line = new fabric.Line([200, 100, 100, 40], { stroke: "blue", strokeWidth: 20, borderColor: "red" }); // Add it to the canvas canvas.add(line); </script> </body> </html>
将rgba值传递给borderColor键
示例
除了传递简单的颜色名称作为字符串之外，我们还可以使用RGBA值，其组件指定红色、绿色、蓝色和alpha的值，其中alpha表示不透明度。在这个例子中，我们使用了rgba(164,0, 0,1)，它是深红色的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>Passing a rgba value to the borderColor key</h2> <p> You can select the line object to see the border colour added using rgba value </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 a Line object var line = new fabric.Line([200, 100, 100, 40], { stroke: "blue", strokeWidth: 20, borderColor: "rgba(164,0,0,1)" }); // Add it to the canvas canvas.add(line); </script> </body> </html>
更新于：2022年10月25日
浏览量：159
广告