En este artículo, estableceremos la escala horizontal de una línea de lienzo en Fabric.js. La línea en Fabric.js es móvil y se puede estirar según los requisitos. Además, la línea se puede personalizar en lo que respecta al color del trazo inicial, la altura, el ancho, el color de relleno o el ancho del trazo.
Para que esto sea posible, vamos a utilizar una biblioteca de JavaScript llamada Fabric.js. Después de importar la biblioteca, crearemos un bloque de lienzo en la etiqueta del cuerpo que contendrá la Línea. Después de esto, inicializaremos las instancias de Canvas y Line proporcionadas por Fabric.js, estableceremos la escala horizontal de una línea usando la propiedad scaleX y representaremos la línea en el lienzo como se indica a continuación.
Sintaxis:
fabric.Line ({
scaleX : number
});
Parámetros: esta propiedad tiene un valor único como se mencionó anteriormente y se describe a continuación:
- scaleX: Es un valor numérico que especifica la escala horizontal de una Línea del lienzo.
Ejemplo 1:
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js">
</script>
</head>
<body>
<h1>fabric.js | line scaleX property</h1>
<canvas id="canvas" width="600" height="200"
style="border:1px solid #000000;">
</canvas>
<script>
// Initialize a Canvas instance
var canvas = new fabric.Canvas("canvas");
// Initialize a Line instance
var line = new fabric.Line([150, 10, 220, 150], {
stroke: 'green',
// Set the scaleX of the line
scaleX: 3
});
canvas.add(line);
</script>
</body>
</html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js">
</script>
</head>
<body>
<h1>fabric.js | line scaleX property</h1>
<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 Line instance
var line = new fabric.Line([150, 10, 220, 150], {
stroke: 'green',
// Set the scaleX of the line
scaleX: 2
});
canvas.add(line);
</script>
</body>
</html>
Producción:
