En este artículo, veremos cómo bloquear el ancho de trazo uniforme de un polígono 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 el polígono es móvil y se puede estirar según los requisitos. Además, el polígono se puede personalizar en lo que respecta al color del trazo inicial, el color de relleno, el ancho del trazo o el tamaño.
Acercarse:
La biblioteca de JavaScript de 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á nuestro polígono. Después de esto, inicializaremos las instancias de Canvas y Polygon proporcionadas por FabricJS y bloquearemos el ancho de trazo uniforme del lienzo Polygon usando la propiedad strokeUniform y representaremos el polígono en el lienzo 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 }], {
strokeUniform: string
}
);
Parámetro: 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” .
Nota: Los píxeles de dimensión deben crear un polígono.
Ejemplo: El siguiente ejemplo ilustra Fabric.JS Polygon strokeUniform en JavaScript.
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 strokeUniform 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',
strokeWidth: 5,
strokeUniform: false,
});
// 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