Carte de tuiles hexagonales optimisation

**Doksuri** · 12/09/2018, 17h01

Bonjour a tous,

j'essaye de faire une carte avec des tuiles hexagonales. je suis parti sur du svg. je ne compte pas afficher la totalite de la carte, du coup, j'ai fais un system de drag
voici ou j'en suis

Code html :

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
88
89
90
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>SVG Test</title>
</head>
<body>
<div id="mapcontainer" style="width:1050px; height:800px; position: relative; overflow: hidden;">
    <svg id="gridSvg" version="1.1" xmlns="http://www.w3.org/2000/svg"
         style="position: absolute; top: 0; left: 0; -moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;-o-user-select:none;">
        <defs>
            <pattern id="image" height="100%" width="100%" patternContentUnits="objectBoundingBox" viewBox="0 0 1 1" preserveAspectRatio="xMidYMid slice">
                <image height="1" width="1"  preserveAspectRatio="xMidYMid" xlink:href="img/tiles/grass1.png" />
            </pattern>
        </defs>
    </svg>
</div>
 
<script type="text/javascript">
    function hexPoints(x, y, radius) {
        let points = [];
        for(let theta=0; theta<Math.PI*2; theta+=Math.PI/3) {
            let pointX = x + radius * Math.sin(theta);
            let pointY = y + radius * Math.cos(theta);
            points.push(pointX.toFixed(2) + ',' + pointY.toFixed(2));
        }
        return points.join(' ');
    }
 
    let radius = 50;
    let cols = 50;
    let rows = 50;
 
    let offset = (Math.sqrt(3) * radius) / 2;
    document.getElementById('gridSvg').style.width = cols*radius*2 + 'px';
    document.getElementById('gridSvg').style.height = rows*radius*2 + 'px';
    for(let col=0; col<cols; col++) {
        for(let row=0; row<rows; row++) {
            let x = radius + offset * col * 2;
            let y = radius + offset * row * Math.sqrt(3);
 
            if(row%2 !== 0) { x += offset; }
            let g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
            document.getElementById('gridSvg').appendChild(g);
            let poly = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
            // poly.style.fill = 'url(#image)';//pour apres, pour mettre une image de fond
            poly.style.fill = 'white';
            poly.style.stroke = 'black';
            poly.style.strokeWidth = '1px';
            poly.setAttribute('points', hexPoints(x, y, radius));
            poly.setAttribute('x', col);
            poly.setAttribute('y', row);
            g.appendChild(poly);
 
            let txt = document.createElementNS('http://www.w3.org/2000/svg', 'text');
            txt.textContent = col+':'+row;
            txt.setAttribute('x', hexPoints(x, y, radius/2).split(' ')[0].split(',')[0]);
            txt.setAttribute('y', hexPoints(x, y, radius/2).split(' ')[0].split(',')[1]);
            txt.setAttribute('font-family', 'Verdana');
            txt.setAttribute('font-size', '10');
            g.appendChild(txt);
 
            g.addEventListener('mousedown', function (e) {
                e.stopPropagation();
                mouseLastPos = {
                    x:e.clientX,
                    y:e.clientY
                };
            });
            g.addEventListener('mouseup', function() { mouseLastPos = false; });
            g.addEventListener('mousemove', function(e) { dragMap(e); });
            poly.addEventListener('mouseover', function(event) { event.target.style.fill = 'rgba(255,0,0,.5)'; });
            // poly.addEventListener('mouseout', function(event) { event.target.style.fill = 'white'; });
 
 
        }
    }
 
    let mouseLastPos = false;
    function dragMap(mouse) {
        if(mouseLastPos) {
            document.getElementById('gridSvg').style.top = document.getElementById('gridSvg').style.top.split('px')[0]*1 + (mouse.clientY - mouseLastPos.y);
            document.getElementById('gridSvg').style.left = document.getElementById('gridSvg').style.left.split('px')[0]*1 + (mouse.clientX - mouseLastPos.x);
            mouseLastPos.y = mouse.clientY;
            mouseLastPos.x = mouse.clientX;
        }
    }
</script>
</body>
</html>

cela fonctionne bien... cependant, le navigateur ne semble pouvoir en afficher que ~20x20... au dela, les tuiles ne s'affichent plus (on voit que le navigateur recalcule quand on survole les tuiles)
(si on commente la ligne poly.addEventListener('mouseover', function(event) { event.target.style.fill = 'rgba(255,0,0,.5)'; }); c'est flagrant : on se retrouve avec des tuiles "fantomes" : elle sont bien la, mais le navigateur ne semble pas savoir comment les afficher)

avez-vous deja rencontre ce probleme ?
quelle est la meilleure solution pour faire une carte en hexa ? (svg ou divs)

**psychadelic** · 12/09/2018, 17h27

c'est idiot, t'es en SVG, donc il faut utiliser la viewBox ..

Code HTML :

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
 
<body>
  <!-- div id="mapcontainer"   inutile -->
      <svg  id="gridSvg" width="1050px" height="800px" viewBox="0 0 200 100" >
      <defs>
        <pattern id="image" height="100%" width="100%" patternContentUnits="objectBoundingBox" viewBox="0 0 1 1"
          preserveAspectRatio="xMidYMid slice">
          <image height="1" width="1" preserveAspectRatio="xMidYMid" xlink:href="img/tiles/grass1.png" />
        </pattern>
      </defs>
    </svg>
 
  <script defer>
    var The_gridSvg = document.getElementById('gridSvg');
    var svgns = "http://www.w3.org/2000/svg";
 
 
    The_gridSvg.setAttribute("viewBox", "-250 -250 500 750");

la viewBox permet non seulement d'indiquer la zone à afficher, mais également de régler l'échelle d'affichage ( zoom + - )

**psychadelic** · 12/09/2018, 22h46

Moi, je préfère le SVG, et je regrette la façon dont SMIL à été abandonné et transformé dans le CSS3

Bon, du coup, j'ai corrigé ton script HTML / SVG / JS + CSS3, histoire que tu puisse continuer sur ta lancée, mais en utilisant du code propre

Code HTML :

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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!doctype html>
<html>
 
<head>
  <meta charset="utf-8">
  <title>SVG Test</title>
  <style>
    svg#gridSvg {
      border: 2px solid rgb(255,0,0);
    }
 
    svg#gridSvg g > polygon {
      fill:ghostwhite;
      stroke: grey;
      stroke-width: 0.4;
      stroke-opacity:0.8;
    }
    svg#gridSvg polygon:hover {
      fill :rgba(255,0,0,.5);
    }
    svg#gridSvg text {
      font-family : Verdana;
      font-size: 10px;
    }
 
  </style>
</head>
 
<body>
 
 
  <svg  id="gridSvg" width="1050px" height="800px" viewBox="0 0 1050 800" >
    <defs>
      <pattern id="image" height="100%" width="100%" patternContentUnits="objectBoundingBox" viewBox="0 0 1 1"
        preserveAspectRatio="xMidYMid slice">
        <image height="1" width="1" preserveAspectRatio="xMidYMid" xlink:href="img/tiles/grass1.png" />
      </pattern>
    </defs>
  </svg>
 
  <script defer>
    const
      svgns  = "http://www.w3.org/2000/svg",
      radius = 50,
      cols   = 50,
      rows   = 50,
      offset = (Math.sqrt(3) * radius) / 2
    ;
    var eGridSvg = {
      ref : document.getElementById('gridSvg'),
      vBx : { l : 0, t :0 , w:1050, h: 800 },
      OnMove : false,
      MovePos : { x :0, y : 0 }
    };
 
    function hexPoints(x, y, radius) {
      let points = [];
      for (let theta = 0; theta < Math.PI * 2; theta += Math.PI / 3) {
        let pointX = x + radius * Math.sin(theta);
        let pointY = y + radius * Math.cos(theta);
        points.push(pointX.toFixed(2) + ',' + pointY.toFixed(2));
      }
      return points.join(' ');
    }
 
    for (let col = 0; col < cols; col++) {
      for (let row = 0; row < rows; row++) {
        let x = radius + offset * col * 2;
        let y = radius + offset * row * Math.sqrt(3);
 
        if (row % 2 !== 0) {
          x += offset;
        }
        let g = document.createElementNS( svgns, 'g');
           eGridSvg.ref.appendChild(g);
 
        let poly = document.createElementNS( svgns, 'polygon');
          poly.setAttributeNS(null, 'x', col);
          poly.setAttributeNS(null, 'y', row);
          poly.setAttributeNS(null, 'points', hexPoints(x, y, radius) );
        g.appendChild(poly);
 
        let txt = document.createElementNS( svgns, 'text');
          txt.textContent = col + ':' + row;
          txt.setAttributeNS(null,'x', hexPoints(x, y, radius / 2).split(' ')[0].split(',')[0]);
          txt.setAttributeNS(null,'y', hexPoints(x, y, radius / 2).split(' ')[0].split(',')[1]);
        g.appendChild(txt);
      }
    }
 
    eGridSvg.ref.addEventListener('mousedown', function(e) {
      eGridSvg.OnMove = true;
      eGridSvg.MovePos = { x : e.clientX, y : e.clientY };
    }, true);
 
 
    document.addEventListener('mouseup', function() {
      eGridSvg.OnMove = false;
    }, true);
 
 
    document.addEventListener('mousemove', function(event) {
        event.preventDefault();
        if (eGridSvg.OnMove) {
          let mousePosition = { x : event.clientX, y : event.clientY };
 
          eGridSvg.vBx.l -= (mousePosition.x - eGridSvg.MovePos.x);
          eGridSvg.vBx.t -= (mousePosition.y - eGridSvg.MovePos.y);
          eGridSvg.MovePos = mousePosition;
 
          eGridSvg.ref.setAttribute("viewBox", `${eGridSvg.vBx.l} ${eGridSvg.vBx.t} ${eGridSvg.vBx.w} ${eGridSvg.vBx.h}`);
        }
    }, true);
 
  </script>
</body>
 
</html>

**Doksuri** · 13/09/2018, 08h39

Envoyé par psychadelic

c'est idiot, t'es en SVG, donc il faut utiliser la viewBox ..

le SVG n'est pas mon fort

c'etait bien ca le probleme.

j'avais effectivement un probleme de zoom lors de mon drag, du coup, merci pour ta 2eme reponse qui corrige aussi ce probleme de zoom

Carte de tuiles hexagonales optimisation

Conception Web

Discussions similaires

Partager

Partager