在本教程中,我们将使用 FabricJS 创建一个带有虚线图案边框的三角形。三角形是 FabricJS 提供的各种形状之一。为了创建一个三角形,我们必须创建一个 Fabric.Triangle 类的实例并将其添加到画布中。
我们可以更改边框虚线的外观,通过使用 borderDashArray 属性。但是,我们的三角形对象必须有边框才能使该属性发挥作用。如果为 hasBorders 属性指定了错误值,则此属性将不起作用。
new fabric.Triangle({ borderDashArray: Array }: Object)
选项(可选) - 此参数是一个对象< /em> 为我们的三角形提供额外的定制。使用此参数,可以更改与 borderDashArray 为属性的对象相关的属性,例如颜色、光标、描边宽度和许多其他属性
borderDashArray - 此属性接受指定破折号的Array通过数组声明间隔的模式。
将 borderDashArray 作为带有自定义值的键传递
让我们看一个使用 FabricJS 中的 borderDashArray 属性创建虚线图案边框的代码示例。在这个例子中,我们使用了一个 [7,10] 数组,它告诉我们将通过绘制一条 7px 长的线,后面跟一个 10px 的间隙,并一遍又一遍地重复这个相同的图案来创建该图案。
<!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 borderDashArray as key with a custom value</h2> <p>Select the triangle to see the dash pattern</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 triangle object var triangle = new fabric.Triangle({ left: 105, top: 60, width: 100, height: 70, fill: "#deb887", borderColor: "red", borderDashArray: [7, 10], }); // Add it to the canvas canvas.add(triangle); </script> </body> </html>
传递值为“false”的 hasBorders 键
正如我们在此示例中看到的,即使我们已经分配了属性borderColor 和 borderDashArray 正确的值,它们不起作用,因为 hasBorders 属性已设置为 false。当设置为 False 时,不渲染对象的边框。
<!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 hasBorders key with the value "false"</h2> <p>Select the triangle and observe that its borders have not been rendered.</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 triangle object var triangle = new fabric.Triangle({ left: 105, top: 60, width: 100, height: 70, fill: "#deb887", borderColor: "red", borderDashArray: [7, 10], hasBorders: false, }); // Add it to the canvas canvas.add(triangle); </script> </body> </html>
以上就是如何使用 FabricJS 创建带有虚线图案边框的三角形?的详细内容,更多请关注php中文网其它相关文章!
已抢186973个
抢已抢67454个
抢已抢353608个
抢已抢668144个
抢已抢123540个
抢已抢25384个
抢