Cómo: Marcas circulares con Traceit.js y jQuery

En las presentaciones clásicas de pizarra o rotafolio, las palabras clave a menudo se circulan para subrayar su importancia. Esta opción de marcado ahora se puede transferir a proyectos web utilizando el complemento jQuery „traceit.js“. Sin mucho esfuerzo, los elementos HTML elegidos se pueden marcar con un círculo que se asemeja a los círculos dibujados a mano de las presentaciones de pizarra. „traceit.js“ funciona especialmente bien con tutoriales, ya que los aspectos importantes se pueden marcar de manera muy fácil y eficiente.

Integración y uso de Traceit.js

Usar «rastrear.js“, tanto jQuery como la biblioteca de JavaScript „Raphaël“ deben incorporarse ya que el complemento utiliza los métodos de dibujo SVG de „Raphaël“. Alternativamente, también hay un archivo JavaScript combinado que contiene el complemento y la biblioteca „Raphaël“.

Una vez que los archivos están integrados, cualquier contenido se puede encerrar en un círculo de la siguiente manera:

<p><span id="schlagwort">Schlagworte</span> sollten immer auffallen.</p>

En el ejemplo, el contenido de un „“-Element está encerrado en un círculo. Para hacerlo, se distribuye y transfiere una identificación a «traceit.js» para usar el complemento en el contenido.

$("#schlagwort").trace();

Cerco predeterminado

El complemento se asegura de que el contenido esté encerrado en un círculo según su tamaño. Los cercos no están restringidos a elementos de texto, ya que „traceit.js“ también se puede usar en imágenes. Sin embargo, puede haber problemas al tratar de encerrar en un círculo varias palabras que cubren más de una línea. Aparte de eso, el complemento hace un buen trabajo al calcular el tamaño del elemento.

Alteración de la apariencia del cerco

De forma predeterminada, los elementos están rodeados por una delgada línea verde. Sin embargo, la aparición de la línea se puede ajustar de manera única a través de „traceOpt“. No solo se puede cambiar el color y el ancho de la línea, sino también la opacidad.

$("#schlagwort").trace({
  traceOpt {
    "stroke": "red";
    "stroke-width": 5,
    "stroke-opacity": 0.5,
    "fill": "yellow",
    "fill-opacity": 0.25,
    "z-index": -1,
    "stroke-linecap": "round"
  }
});

En el ejemplo anterior, se dibuja una línea roja de cinco píxeles de ancho con un 50 % de opacidad. El círculo se completa con un área amarilla con un 25% de opacidad. La posición de la línea se puede definir a través del «índice z». Todas las características CSS conocidas por el formato SVG se pueden utilizar para la representación de la línea. Por ejemplo, los puntos inicial y final de un círculo se pueden agregar a las líneas a través de «stroke-linecap», lo que le da a los círculos un toque aún más realista.

Cercos individuales

De forma predeterminada, la línea se superpone al elemento elegido. En nuestro ejemplo, se ha colocado detrás de él. Lógicamente, los círculos dibujados a mano siempre están por encima del contenido. Pero en ciertas situaciones, tiene sentido colocar el círculo detrás del contenido para que sea más fácil de leer. Esto también permite cambiar el contenido. Como „traceit.js“ imita círculos dibujados a mano, los puntos inicial y final de los círculos no deben coincidir. La opción „traceCanvasPadding“ permite al usuario ingresar la distancia entre los dos puntos. El uso del valor 0 crea una elipse perfecta mientras que el uso de los valores anteriores crea puntos que no coinciden. A través de „redrawSpeed“, se ajusta el ritmo del cerco. Para una presentación realista, «traceCanvasPadding» y «redrawSpeed» siempre deben cambiarse juntos, ya que la distancia entre el punto inicial y el final de un círculo dibujado a mano generalmente aumenta con el aumento de la velocidad de dibujo.

Cerco dibujado como un elemento SVG

El cerco es, como se mencionó anteriormente, creado como un elemento SVG usando „Raphaël“. Para hacerlo, se coloca un elemento SVG dentro de un contenedor „

#keyword_wrap svg {
  overflow: visible !important;
}

$("#schlagwort").trigger("hide.trace");

$("#schlagwort").trace({
  onEndTrace: function() {
    alert("Circle completed.");
  }
});

#Cómo #Marcas #circulares #con #Traceitjs #jQuery