En este artículo, veremos cómo bloquear el ancho de trazo uniforme de una polilínea de lienzo usando FabricJS para que el ancho del trazo permanezca igual incluso cuando escalamos el objeto a un tamaño mayor. El lienzo significa que la polilínea es móvil y se puede estirar de acuerdo con los requisitos. Además, la polilínea se puede personalizar en lo que respecta al color del trazo inicial, el color de relleno, el ancho del trazo o el tamaño.
La biblioteca de JavaScript FabricJS se utiliza para lo anterior. 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 bloquearemos el ancho de trazo uniforme de la Polyline del lienzo usando la propiedad strokeUniform y representaremos la Polyline en el lienzo como se muestra en el siguiente ejemplo.
Sintaxis:
var polyline = new fabric.Polyline(Points, {
strokeUniform: string
});
Parámetros: esta propiedad acepta un solo parámetro como se mencionó anteriormente y se describe a continuación:
- strokeUniform: cuando es «falso», el ancho del trazo se escalará con el objeto. Cuando es «verdadero», el trazo siempre coincidirá con el tamaño de píxel exacto ingresado para el ancho del trazo. El valor predeterminado es «falso».
El siguiente ejemplo ilustra la propiedad strokeUniform 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 strokeUniform Property
</b>
</div>
<canvas id="canvas"
width="600"
height="200"
style="border:1px solid #000000;">
</canvas>
<script>
// Initiate a Canvas 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,
fill: 'yellow',
strokeUniform: false,
});
// 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