web-dev-qa-db-fra.com

Trace une flèche entre deux divs

Je cherche une solution à la question que je pensais déjà être résolue… .. Mais je n'ai vu que de gros projets avec beaucoup de fonctionnalités, mais pas de solution simple.

En fait, j'ai besoin de quelque chose comme ça:

http://i.imgur.com/iktvmLK.png

Donc, pour obtenir une flèche sur une div contenant des carrés (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>

J'ai regardé dans la direction de la toile, mais je suis tombé sur la toile qui n'était pas visible derrière mes divs (peut-être qu'un indice z pourrait aider) à venir souvent . (pour expliquer quelque chose sur le site, les flèches sont presque indispensables)

javascriptjqueryhtmlcsscanvas
23
Alexander P

Vous pourriez envisager de SVG.

enter image description here

En particulier, vous pouvez utiliser une ligne avec une extrémité de marqueur en forme de flèche.

Assurez-vous de définir orient = auto pour que la pointe de la flèche soit pivotée afin de correspondre à la pente de la ligne.

Comme SVG est un élément DOM, vous pouvez contrôler la position de début/fin de la ligne en javascript.

Voici le code et un violon: 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>
34
markE

Utilisez une bibliothèque, telle que JSPlumb: https://jsplumbtoolkit.com/

4
c69

Je ne sais pas si quiconque regarde ce fil plus, mais voici la solution que j'ai utilisée, elle ne diffère que légèrement de la réponse @markE en ce que cette réponse facilite beaucoup la tâche de spécifier exactement où la ligne doit démarrer et s'arrêter.

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

Tout ce que vous avez à faire est de changer les coordonnées x et y de la ligne! J'ai utilisé cette réponse dans mon application de réaction et cela a fonctionné à merveille . Et voici le violon .

2
Red

C'est assez simple pour créer la tête de flèche. Voir cet exemple dans CSS Tricks ..__ Peut-être que l’utiliser dans un conteneur avec la ligne de flèche pourrait le faire.

0
user887958

Toile et jCanvas

En fonction de vos besoins, vous devriez absolument utiliser Canvas et la bibliothèque jCanvas . Cela rend les choses comme ça un jeu d'enfant.

Je me suis risqué à tout faire avec DIVs et jQuery, mais l'interactivité et la qualité étaient toujours insuffisantes. Cela ouvre vraiment les portes sans ajouter de complexité au code.

J'espère que cela aide les autres, comme moi. 

JP

EDITER 2017 05 20:

Auparavant, j'avais un exemple lié au sandbox de jCanvas avec tout le code nécessaire pour tracer une flèche entre deux éléments et faire glisser ces deux éléments autour de la toile. Cependant, ce lien ne fonctionne plus et je n'ai le code nulle part ailleurs. 

Donc, je pense toujours que vous devriez jeter un œil sur jCanvas mais, malheureusement, je n’ai aucun exemple de code pour vous lancer. 

0
Joshua Pinter