javascript - sintomas - flechas animadas html
Dibuja una flecha entre dos divs (5)
Estoy buscando una solución a la pregunta que ya esperaba resolver. Pero solo vi grandes proyectos con muchas características pero no una solución simple.
En realidad necesito conseguir algo así:
Entonces para obtener una flecha dibujando sobre un div que contiene algunos cuadrados (divs)
<div id="container">
<div class="white_field"></div>
<div id="1" class="black_field">
<br style="clear:both;">
<div id="2" class="black_field">
<div class="white_field"></div>
<br style="clear:both;">
<div id="3" class="black_field">
<div class="white_field"></div>
</div>
Miré en la dirección del lienzo, pero tropecé con que el lienzo no era visible detrás de mis divs (quizás algo de índice z debería ayudar) Pero aún así es extraño que no pudiera encontrar alguna solución ya preparada de un problema que me parece que aparece con frecuencia . (Para explicar algo en el sitio, las flechas son casi una necesidad)
Lienzo y jCanvas
De acuerdo con sus necesidades, definitivamente debería revisar usando Canvas y la biblioteca jCanvas . Hace las cosas como esta una brisa.
Me aventuré por el camino de hacer todo con DIVs y jQuery pero siempre me faltaba interactividad y calidad. Esto realmente abre las puertas sin agregar complejidad de código.
Espero que ayude a otros, como yo.
JP
EDITAR 2017 05 20:
Solía tener un ejemplo aquí que se vinculaba a la zona de pruebas de jCanvas con todo el código que necesitabas para dibujar una flecha entre dos elementos y arrastrar ambos elementos alrededor del lienzo. Sin embargo, ese enlace ya no funciona y no tengo el código en ningún otro lugar.
Por lo tanto, sigo pensando que deberías revisar jCanvas pero desafortunadamente no tengo ningún código de ejemplo para comenzar.
Es bastante simple crear la cabeza de flecha. Vea este ejemplo en CSS Tricks . Tal vez usar esto dentro de un contenedor que tiene la línea de flecha podría hacerlo.
No tengo idea de si alguien mira este hilo más, pero aquí está la solución que usé, solo difiere un poco de la respuesta de @markE en que esta respuesta hace que sea mucho más fácil especificar exactamente dónde debe comenzar y detenerse la línea.
<head>
<style>
.arrow{
stroke:rgb(0,0,0);
stroke-width:2;
marker-end:url(#markerArrow)
}
</style>
</head>
<body>
<svg height="210" width="500">
<defs>
<marker id="markerArrow" markerWidth="13" markerHeight="13" refX="2" refY="6"
orient="auto">
<path d="M2,2 L2,11 L10,6 L2,2" style="fill: #000000;" />
</marker>
</defs>
<line x1="0" y1="0" x2="200" y2="100" class="arrow" />
</svg>
</body>
¡Todo lo que tienes que hacer es cambiar las coordenadas x e y de la línea! Utilicé esta respuesta en mi aplicación de reacción y funcionó muy bien. Y aquí está el fiddle .
Usted podría considerar SVG.
En particular, puede usar una línea con un extremo de marcador con forma de flecha.
Asegúrese de establecer orient = auto para que la punta de flecha se gire para que coincida con la pendiente de la línea.
Como SVG es un elemento DOM, puede controlar la posición inicial / final de la línea en javascript.
Aquí está el código y un Fiddle: http://jsfiddle.net/m1erickson/9aCsJ/
<svg width="300" height="100">
<defs>
<marker id="arrow" markerWidth="13" markerHeight="13" refx="2" refy="6" orient="auto">
<path d="M2,2 L2,11 L10,6 L2,2" style="fill:red;" />
</marker>
</defs>
<path d="M30,150 L100,50"
style="stroke:red; stroke-width: 1.25px; fill: none;
marker-end: url(#arrow);"
/>
</svg>
Utilice una biblioteca, como JSPlumb : https://jsplumbtoolkit.com/