Solo tiene sentido cuando el objeto se usa como clipPath. El polígono de 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, la forma, el color de relleno o el ancho del trazo.
Para establecer la posición absoluta de un polígono de lienzo, se utiliza la biblioteca de JavaScript llamada FabricJS. Después de importar la biblioteca, crearemos un bloque de lienzo en la etiqueta del cuerpo que contendrá el polígono. Después de esto, inicializaremos las instancias de Canvas y el polígono proporcionado por FabricJS y estableceremos la posición absoluta de un polígono de lienzo usando la propiedad absolutePositioned .
Sintaxis:
fabric.Polygon([
{ x: pixel, y: pixel },
{ x: pixel, y: pixel },
{ x: pixel, y: pixel},
{ x: pixel, y: pixel},
{ x: pixel, y: pixel }],
{ absolutePositioned: boolean }
);
Parámetros: esta función acepta un solo parámetro como se mencionó anteriormente y se describe a continuación:
- absolutePositioned: Mantiene el valor booleano.
Los siguientes ejemplos ilustran la propiedad AbsolutePositioned de Fabric.JS Polygon en JavaScript:
Ejemplo 1: aquí, la propiedad absolutePosition se establece en false.
<!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 absolutePositioned 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 }], {
absolutePositioned: false
});
// Render the polygon in canvas
canvas.add(polygon);
</script>
</body>
</html>
Producción:
Ejemplo 2: aquí, la propiedad absolutePosition se establece en verdadero.
<!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 absolutePositioned 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 }], {
absolutePositioned: true
});
// Render the polygon in canvas
canvas.add(polygon);
</script>
</body>
</html>
Producción:
Referencia: http://fabricjs.com/docs/fabric.Polygon.html#absolutePositioned
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA