En este artículo, veremos cómo agregar un desplazamiento de trazo al lienzo Polyline usando FabricJS . El lienzo significa que la polilínea escrita es móvil, giratoria, redimensionable y se puede estirar. Pero en este artículo, agregaremos un desplazamiento de trazo. Además, la propia polilínea 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á nuestra Polilínea. Después de esto, inicializaremos las instancias de Canvas y Polyline proporcionadas por FabricJS y crearemos un trazo usando la propiedad de trazo, y luego usaremos la propiedad strokeDashOffset para agregar un desplazamiento de trazo y representar el lienzo en la polilínea como se muestra en el siguiente ejemplo.
Sintaxis:
var polyline = new fabric.Polyline(Points, {
strokeDashOffset: number
});
Parámetros: esta propiedad acepta un solo parámetro como se mencionó anteriormente y se describe a continuación:
- strokeDashOffset: este parámetro define la cantidad de desplazamiento del trazo.
El siguiente ejemplo ilustra la propiedad strokeDashOffset en Fabric.js:
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 | Polyline strokeDashOffset 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 polyline instance
var polyline = new fabric.Polyline([
{ x: 200, y: 10 },{x: 250,y: 50},
{ x: 250, y: 180},{x: 150,y: 180},
{ x: 150, y: 50 },{ x: 200,y: 10 }],
{
stroke: 'green',
strokeWidth: 3,
cornerStyle: 'circle',
strokeDashOffset: 10,
});
// Render the polyline in canvas
canvas.add(polyline);
</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