Tracer une ligne entre deux DIV

Invité · 19/02/2009, 14h48

Bonjour à tous,

Je viens de découvrir Dojo, qui me plait bien pour ce que je cherche à faire, notamment grâce à son D&D facile à mettre en place !

Par contre, je manipule des DIV qu'on peut déplacer à la souris, et qui doivent être reliés par des flèches. Je souhaite donc dessiner des lignes d'une bordure d'un DIV à celle d'un autre DIV, pour matérialiser ces flèches (à moins qu'il y ait une autre méthode ?).

Seulement je ne m'en sors pas avec le système de coordonnées : ma ligne n'est pas du tout au mon endroit... Quelqu'un a déjà fait ça ?

Voici mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
	"http://www.w3.org/TR/html4/strict.dtd">
<html>
 
<head>
  <title>Test Dojo</title>
  <style type="text/css">
  <!--
        #board {
          border: 1px solid gray; 
          background: #ccc;
          width: 300px; 
          height: 300px;
          padding: 5px;
        }
 
        #red, #blue {
          color: black;
          border: black;
          width: 40px;
          height: 20px;
          display: block;
          text-align: center;
        }
 
        #red {
          background: red;
        }
 
        #blue {
          background: blue;
        }
  -->
  </style>
 
  <script type="text/javascript" src="js/dojo/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
 
  <script type="text/javascript">
  <!-- 
    dojo.require("dojo.dnd.move");
    dojo.require("dojox.gfx");
    dojo.require("dojox.fx");
 
    dojo.addOnLoad(
      function () {
        // create moveable objects
        new dojo.dnd.move.parentConstrainedMoveable("red", {area: "padding", within: true});
        new dojo.dnd.move.parentConstrainedMoveable("blue", {area: "padding", within: true});
 
        dojox.fx.slideBy({
      		node:"blue",
      		duration: 1,
      		top: 0, 
          left:145
      	}).play();
 
      	// surface for drawing
      	var board = dojo.byId("board");
      	var surface = dojox.gfx.createSurface(board, board.offsetWidth, board.offsetHeight);
 
      	var red = dojo.byId("red");
      	var blue = dojo.byId("blue");
 
      	var line = { x1: red.offsetLeft + red.offsetWidth, 
                     y1: red.offsetTop + red.offsetHeight / 2, 
                     x2: blue.offsetLeft, 
                     y2: blue.offsetTop + blue.offsetHeight / 2 };
        surface.createLine(line).setFill([255, 0, 0, 0.5]).setStroke({color: "red", width: 1});
      }
    );
  -->   
  </script>
</head>
 
<body style="font-size: 12px;">
  <h1>A Simple Example</h1>
 
  <div id="board">
    <div id="red">
      RED
    </div>
    <div id="blue">
      BLUE
    </div>
  </div>
</body>

**emmanuel.remy** · 04/03/2009, 00h54

Salut,

Suis pas trop connaisseur de GFX dans Dojo, mais il apparait que malheureusement les soucis sont ici multiples. D'abord il faut voir que dojox.gfx n'est ni plus ni moins que l'intégration d'une surface svg au sein de la balise div cible (board dans ton cas). Donc si tu mets du padding dans la board cela va décaler d'autant ton système de coordonnées.
Mais pire encore, si tu mets tes balises red et blue dans la balise board alors tu décales la surface svg.
En effet Dojo génère au final ce code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
 
<div id="board">
       <div id="red">RED</div>
       <div id="blue">BLUE</div>       
       <svg width="302" height="302">
           <defs/>
           <line ..... />
       </svg>
</div>

Fort de cela, une piste pourrait être de sortir les red et blue, de les positionner de façon absolues (ainsi plus de décalage de coordonnées au niveau de la surface). Je supprime volontairement le move des balises - chaque chose en son temps

- et je remplace les offsetWidth, offsetHeight etc... par les fonctions dojo standard de positionnement (à voir si ce sont les plus pertinentes ici ?)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
	"http://www.w3.org/TR/html4/strict.dtd">
<html>
 
<head>
  <title>Test Dojo</title>
  <style type="text/css">
  <!--
        #board {
          border: 1px solid gray; 
          background: #ccc;
          width: 300px; 
          height: 300px;
        }
 
        #red, #blue {
        position:absolute;
          color: black;
          border: black;
          width: 40px;
          height: 20px;
          text-align: center;
        }
 
        #red {
          background: red;
          left:10px;
          top:70px;
        }
 
        #blue {
          background: blue;
          left:40px;
          top:180px;
        }
  -->
  </style>
 
  <script type="text/javascript" src="js/dojo/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
 
  <script type="text/javascript">
  <!-- 
    dojo.require("dojo.dnd.move");
    dojo.require("dojox.gfx");
    dojo.require("dojox.fx");
 
    dojo.addOnLoad(
      function () {
 
      	// surface for drawing
      	var board = dojo.byId("board");
      	var surface = dojox.gfx.createSurface(board, board.offsetWidth, board.offsetHeight);
 
      	var red = dojo.byId("red");
      	var blue = dojo.byId("blue");
 
      	r = dojo.coords(red);
      	b = dojo.coords(blue);
      	bd = dojo.coords(board);
 
      	var line = { x1: r.l + r.w - bd.x -1, 
                     y1: r.t + r.h / 2 - bd.y, 
                     x2: b.l -bd.x -1, 
                     y2: b.t + b.h / 2 - bd.y};
        surface.createLine(line).setFill([255, 0, 0, 0.5]).setStroke({color: "red", width: 1});
      }
    );
  -->   
  </script>
</head>
 
<body style="font-size: 12px;">
  <h1>A Simple Example</h1>
    <div id="red">
      RED
    </div>
    <div id="blue">
      BLUE
    </div>  
 
  <div id="board">
 
  </div>
</body>
 
</html>

Voilà, cela fonctionne mais reste à gérer les move, ... et ce n'est que le début !

Regarde du côté de dojox.sketch je suis sûr que cela te donnera des idées.

ERE

Tracer une ligne entre deux DIV [Dojo]

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager