En este artículo, veremos cómo agregar un patrón de trazos y guiones al lienzo de Polygon usando FabricJS. El lienzo significa que el polígono escrito es móvil, giratorio, redimensionable y se puede estirar. Pero en este artículo, agregaremos un patrón de trazo y guión. Además, el polígono en sí no se puede editar como un cuadro de texto.
Para hacerlo posible, vamos a utilizar una biblioteca de JavaScript llamada FabricJS. Después de importar la biblioteca usando CDN, crearemos un bloque de lienzo en la etiqueta del cuerpo que contendrá nuestro polígono. Después de esto, inicializaremos las instancias de Canvas y Polygon proporcionadas por FabricJS y crearemos un trazo usando la propiedad de trazo y luego usaremos la propiedad strokeDashArray para agregar un patrón de trazo y trazo y representar el lienzo en el polígono como se muestra en el siguiente ejemplo.
Sintaxis:
fabric.Polygon([
{ x: pixel, y: pixel },
{ x: pixel, y: pixel },
{ x: pixel, y: pixel},
{ x: pixel, y: pixel},
{ x: pixel, y: pixel }],
{
strokeDashArray : Array
}
);
Parámetros: esta propiedad acepta un solo valor como una array mencionada anteriormente y descrita a continuación:
- Array: Especifica el patrón de trazos y guiones.
El siguiente ejemplo ilustra Fabric.js strokeDashArray:
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Loading the FabricJS library -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js">
</script>
</head>
<body>
<div style="text-align: center;width: 600px;">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<b>
Fabric.js | Polygon strokeDashArray Property
</b>
</div>
<canvas id="canvas" width="600" height="200"
style="border:1px solid #000000;">
</canvas>
<script>
// Initiate a Canvas instance
var canvas = new fabric.Canvas("canvas");
// Initiate a polygon instance
var polygon = new fabric.Polygon([{
x: 295,
y: 10
}, {
x: 235,
y: 198
}, {
x: 385,
y: 78
}, {
x: 205,
y: 78
}, {
x: 355,
y: 198
}], {
stroke: 'green',
strokeDashArray: [10]
});
// Render the polygon in canvas
canvas.add(polygon);
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA