在本教程中,我们将学习如何使用 FabricJS 设置 Line 控制角的颜色。 Line 元素是 FabricJS 中提供的基本元素之一。它用于创建直线。由于线元素在几何上是一维的并且不包含内部,因此它们永远不会被填充。我们可以通过创建fabric.Line的实例来创建线条对象,指定线条的X和Y坐标并将其添加到画布中。 cornerColor 属性允许我们在对象处于活动状态时操纵控制角的颜色。
new fabric.Line( points: Array, { cornerColor: String }: Object)
points - 此参数接受一个点的Array,它确定 (x1, y1) 和 (x2, y2)值,分别是线的起点和终点的 x 轴坐标和 y 轴坐标。
选项(可选) - 此参数是一个对象,它为我们的目的。使用此参数,可以更改与 cornerColor 为属性的对象相关的颜色、光标、描边宽度和许多其他属性。
cornerColor - 该属性接受一个String,它允许我们为角分配颜色当主动选择对象时控制角点。默认值为rgb(178,204,255)。
让我们看一个使用 cornerColor 属性更改颜色的代码示例。在本例中,我们为该键分配了“橙色”值,从而使控制角显示为橙色。
<!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 cornerColor as key with a color name as value</h2> <p> You can select the line object to see that the corner colour is orange </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, cornerColor: "orange" }); // Add it to the canvas canvas.add(line); </script> </body> </html>
我们还可以分配一个 RGBA 值,而不是将简单的颜色名称作为 String 值传递给键。 RGBA 代表红、绿、蓝和 alpha,其中 alpha 是不透明度。让我们看一个代码示例来说明如何做到这一点。
<!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>Assigning an RGBA value to the cornerColor property</h2> <p> You can select the line object to see the corner colour </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, cornerColor: "rgba(255,69,0, 0.8)", }); // Add it to the canvas canvas.add(line); </script> </body> </html>
以上就是FabricJS – 如何设置线条控制角的颜色?的详细内容,更多请关注php中文网其它相关文章!
已抢66207个
抢已抢35061个
抢已抢19514个
抢