Canvas de HTML5: dibujo simplificado con Fabric.js

Dibujar con el elemento HTML Canvas no deja mucho que desear. Son posibles formas y animaciones complejas, el conjunto de características es bastante impresionante. Sin embargo, necesitamos combinar varios métodos cuando se trata, por ejemplo, de crear una forma, rotarla y rellenarla con un color. La biblioteca de JavaScript Fabric.js simplifica las posibilidades que ofrece Canvas y agrega funcionalidad para que el trabajo se haga más rápido. Las animaciones e interacciones se crean y aplican en muy poco tiempo.

Fabric.js: un solo método es suficiente

Una vez que hemos agregado tela.js al encabezado de nuestro documento HTML y creamos un elemento Canvas, estamos más cerca de crear nuestra primera forma. Para hacerlo, insertamos un nuevo objeto Fabric.js y lo adjuntamos al lienzo. En nuestro ejemplo usamos el elemento con el ID „fabricjs“. Por «fabric.Canvas()» podemos agregar opciones para personalizar aún más el lienzo. Podríamos, por ejemplo, definir el color de fondo de esa manera.

var OwnCanvas = new fabric.Canvas("fabricjs", {
  backgroundColor: "seashell"
});

Posteriormente, podemos dibujar múltiples formas y formas, así como textos.

var OwnRect = new fabric.Rect({
  left: 75,
  top: 25,
  fill: "saddlebrown",
  stroke: "yellowgreen",
  strokeWidth: 3,
  width: 100,
  height: 200,
  angle: 20,
  shadow: "black 3px 3px 6px"
});

En nuestro ejemplo usamos „fabric.Rect()“ para crear un rectángulo. Todos los demás valores, como la posición, el tamaño, el color, la rotación o la sombra, se definen mediante parámetros. Sabes que solo con Canvas las cosas no serían tan fáciles. Tendríamos que usar varios métodos en su lugar. El color y la sombra se declaran como estamos acostumbrados desde CSS. En consecuencia, los valores de color pueden estar en „rgb()“ o „rgba()“.

Nuestro primer rectángulo

Todas las propiedades individuales se pueden cambiar más tarde usando „set()“.

OwnRect.set({
  angle: -20,
});

En el ejemplo anterior, ajustamos el ángulo de nuestro rectángulo. El último método llamado «add()» en realidad dibuja la forma en el lienzo.

OwnCanvas.add(OwnRect);

Arrastrar y soltar y más: las formas son interactivas por naturaleza

Todas las formas creadas usando „fabric.Canvas()“ son interactivas por defecto. Podemos arrastrarlos y soltarlos, escalarlos y rotarlos con el mouse o con gestos táctiles. Haga clic en cualquier forma dada y notará los puntos de anclaje que se harán visibles. Si desea cambiar la apariencia de estos anclajes, simplemente use „set()“:

OwnRect.set({
  borderColor: "royalblue",
  cornerColor: "midnightblue",
  cornerSize: 10
});

En algunos casos, probablemente no desee que las formas sean interactivas. El uso del método «fabric.StaticCanvas()» se asegurará de que no sea posible ninguna interacción.

var OwnCanv = new fabric.StaticCanvas("fabricjs");

Gracias a sus propios eventos, Fabric.js puede reaccionar ante la manipulación de cualquier forma dada.

OwnRect.on("modified", function() {
  OwnRect.set({
    fill: "red"
  })
});

En el ejemplo asignamos el evento „modificado“. Se iniciará cada vez que la forma se mueva, gire o se escale. Si no desea reaccionar ante todas estas acciones, Fabric.js ofrece eventos individuales como «rotar» o «escalar» para reaccionar solo ante acciones específicas.

Rectángulo con anclas para mover, escalar y rotar

Fabric.js también puede realizar eventos más clásicos, como «mover» y «mouseup». El método „get()“ nos permite consultar ciertos valores de cualquier forma. Esto es útil para determinar un cierto tipo de manipulación.

OwnRect.on("rotating", function() {
 value = OwnRect.get("angle");
});

En este ejemplo, «get()» consultará el ángulo más reciente de nuestra forma después de cada rotación.

Animaciones en un abrir y cerrar de ojos

El método «animate()» de Fabric.js proporciona una manera absolutamente simple de poner formas en movimiento. Determine la propiedad que desea cambiar y, opcionalmente, agregue un puñado de parámetros para definir la duración y el tipo de la animación deseada.

OwnRect.animate("angle", 45, {
  onChange: OwnCanv.renderAll.bind(OwnCanv),
  duration: 1000,
  easing: fabric.util.ease.easeInElastic
});

Este ejemplo usa „animate()“ para rotar el rectángulo a 45 grados. Nunca olvides «onChange» ya que se preocupa por dibujar la forma en el lienzo durante la animación. Olvídalo y no habrá animación. Los otros parámetros „duración“ y „easing“ son opcionales. Se preocupan por la duración y el tipo de su animación. Fabric.js tiene sus propias funciones de aceleración para controlar diferentes secuencias de movimiento. En lugar de agregar un valor absoluto, el ángulo en nuestro ejemplo, también podríamos optar por trabajar con valores relativos. En lugar de rotar 45 grados, también podríamos rotarlo 45 grados.

OwnRect.animate("angle", "+=45", {
  …
});

En este ejemplo rotamos el rectángulo 45 grados. Asegúrese de ingresar siempre valores relativos entre comillas.

Dibujo de estilo libre en el lienzo

El parámetro simple «isDrawingMode» permite el dibujo de estilo libre. El usuario ahora puede usar su mouse para dibujar formas aleatorias en el lienzo.

var OwnCanv = new fabric.Canvas("fabricjs", {
  isDrawingMode: 1
});

El pincel visible es personalizable.

OwnCanv.freeDrawingBrush.color = "purple"
OwnCanv.freeDrawingBrush.width = 10

En este ejemplo, personalizamos el color y el grosor del pincel usando «freeDrawingBrush».

Mayor conjunto de características y compatibilidad con navegadores

Lo que les presenté hoy es solo un subconjunto bastante pequeño de lo que Fabric.js puede ofrecer. Hay funciones más potentes, como un analizador SVG que toma SVG y los dibuja en el lienzo. La conversión de lienzo a SVG también es posible, al igual que la compatibilidad con dispositivos móviles a través de gestos táctiles. Fabric.js está muy bien documentado y una gran cantidad de demostraciones lo ayudan a comenzar en poco tiempo. Una variedad de puntos de referencia y pruebas le permite averiguar qué navegador admite qué funciones y cómo funcionan. Fabric.js se ejecuta en todos los navegadores actuales. Incluso Internet Explorer es totalmente compatible desde la versión 9 en adelante. Para las versiones 6 a 8, «excanvas» se usa para imitar HTML5 Canvas en navegadores más antiguos. De esa forma, podemos usar al menos algunas de las funciones de estos navegadores antiguos. La biblioteca se publica bajo los términos de la licencia MIT. tela.js es gratuito para uso privado y comercial.

(dpe)