数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究FabricJS – 如何设置线条控制角的描边颜色？
在本教程中，我们将学习如何使用FabricJS设置线条控制角的描边颜色。线条元素是FabricJS提供的基本元素之一，用于创建直线。由于线条元素在几何上是一维的，并且不包含内部，因此它们永远不会被填充。
我们可以通过创建fabric.Line的实例，指定线条的x和y坐标并将其添加到画布上来创建线条对象。cornerStrokeColor属性允许我们设置对象控制角的描边颜色。
语法
new fabric.Line(points: Array , { cornerStrokeColor: String }: Object) 参数
points − 此参数接受一个数组点，它确定(x1, y1)和(x2, y2)的值，分别是线条起点和终点的x轴和y轴坐标。
options (可选) − 此参数是一个对象，它为我们的对象提供额外的自定义选项。使用此参数，可以更改与线条对象相关的原点、笔划宽度和许多其他属性，其中cornerStrokeColor是一个属性。
选项键
cornerStrokeColor − 此属性接受一个字符串值，该值确定控制角的描边颜色。
示例
将cornerStrokeColor作为键，颜色名称作为值传递
让我们来看一个更改对象控制角描边颜色的代码示例。在这里，我们将cornerStrokeColor的值设置为“red”。这将确保我们控制角的描边现在显示为红色。
<!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 cornerStrokeColor as key with a Colour name as value</h2> <p> You can select the line object to see the stroke colour of controlling corners </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, cornerStrokeColor: "red" }); // Add it to the canvas canvas.add(line); </script> </body> </html>
示例
禁用transparentCorners属性以了解cornerColor和cornerStrokeColor之间的区别
从这个例子中我们可以看到，当transparentCorners设置为false时，cornerStrokeColor只改变描边颜色，而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>Disabling transparentCorners property to understand the difference between cornerColor and cornerStrokeColor</h2> <p> You can select the line object to see the difference between cornerStrokeColor and cornerColor </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 line1 = new fabric.Line([200, 100, 100, 40], { stroke: "blue", strokeWidth: 20, transparentCorners: false, cornerColor: "red" }); // Initiate another Line object var line2 = new fabric.Line([300, 100, 500, 40], { stroke: "green", strokeWidth: 20, transparentCorners: false, cornerStrokeColor: "red" }); // Add them to the canvas canvas.add(line1); canvas.add(line2); </script> </body> </html>
更新于：2022年10月20日
141 次浏览
广告