fabricjs Tutorial
Empezando con fabricjs
Buscar..
Observaciones
fabric.js es una biblioteca javascript poderosa y bastante simple para el lienzo HTML5. Proporciona una plataforma interactiva para trabajar con el lienzo HTML5. Usando la tela puede crear objetos / formas en lienzo desde formas geométricas simples hasta formas complejas. Incluso puedes trabajar con imágenes usando fabric.js. fabric.js también soporta animaciones. Proporciona controles para trabajar con imágenes como arrastrarlas, escalarlas girándolas. Permite agrupar formas / objetos que pueden ser manipulados juntos. admite eventos no solo limitados al elemento de lienzo sino también con objetos. Incluso proporciona funcionalidad para serializar el lienzo a SVG o JSON y reutilizarlo cuando sea necesario. Incluso admite la ejecución de fabric bajo Node.js, con la ayuda de las bibliotecas jsdom y node-canvas.
Instalación o configuración
Fabric.js es como cualquier otra biblioteca JS específica para el lienzo. Fácil de configurar y empezar. Todo lo que necesita hacer es descargar el fabric.js desde AQUÍ e incluirlo en su proyecto como cualquier otra biblioteca de JS, por ejemplo, la forma en que lo hace para jQuery. Luego cree el archivo html suponiendo index.html como:
<head>
<script src="fabric.js"></script>
</head>
<body>
<canvas id="canvas" width="400" height="400" style="border:2px solid #000000</canvas>
<script>
var canvas = new fabric.Canvas('canvas');
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));
</script>
</body>
El atributo src en la secuencia de comandos hace referencia a un archivo fabric.js que se encuentra en la misma carpeta, se puede guardar en otra carpeta y proporcionar una ruta relativa. Y eres bueno para irte. Para más información acerca de Fabric visite la página oficial . Aquí hay una demo muy básica.
Hola Mundo
<canvas id="c" width="400" height="400"></canvas>
var canvas = new fabric.Canvas("c");
var text = new fabric.Textbox('Hello world From Fabric JS', {
width:250,
cursorColor :"blue",
top:10,
left:10
});
canvas.add(text)
El ejemplo crea un texto 'Hello world From Fabric JS' usando fabricjs. Manifestación