Circle Marks with jQuery

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“.

rastrearlo

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();

traceitjs-estándar
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.

traceitjs-individuell
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 „

“. Este contenedor recibe una identificación que consiste en la identificación del elemento que se va a encerrar en un círculo, «palabras clave» en el ejemplo, seguido de la cadena de caracteres «_wrap». El nombre del contenedor se puede cambiar a través de „traceDivPref“. Esto puede ser útil cuando los ID generados ya están en uso en otro lugar. La colocación del cerco se realiza utilizando hojas de estilo del contenedor „

“. Como se puede acceder al contenedor a través de su ID, la posición y la apariencia del círculo se pueden cambiar individualmente usando CSS. De esta manera, el elemento SVG se dibuja a través de Inline CSS, de modo que los contenidos que sobresalen se ocultan («desbordamiento: oculto»). En ocasiones, esto hace que el final de la línea no se muestre por completo, ya que sobresale del área de dibujo. Esto se puede sobrescribir a través de hojas de estilo.

#keyword_wrap svg {
  overflow: visible !important;
}

De esa forma se asegura que la elipse dibujada siempre se muestre completa.

Definición del comportamiento de cerco

Un clic en un círculo es suficiente para ocultarlo. Alternativamente, también se puede ocultar una línea usando el método „trigger()“.

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

Además, «traceit.js» proporciona tres devoluciones de llamada. Permiten la ejecución de una función cuando se completa la animación («onEndTrace»), se hace clic en el círculo («onClick») o cuando se oculta («onHide»).

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

En este ejemplo, el usuario recibe una alerta tan pronto como se completa el círculo.

Conclusión

„traceit.js“ se puede integrar y utilizar de forma rápida y sencilla. El complemento proporciona una manera fácil y visualmente atractiva de dirigir la atención a un elemento en particular.

(dpe)

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

Publicaciones Similares

Deja una respuesta

Tu dirección de correo electrónico no será publicada.