PaperKit/isometric.html at main · alexandregrignon/PaperKit · GitHub

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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="Grille isométrique à imprimer avec espacement personnalisable. Idéale pour le dessin en 3D et la conception technique.">
    <title>Grille isométrique - PaperKit</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="format-a4.css">
    <script defer src="https://cloud.umami.is/script.js" data-website-id="3d089b60-6919-490c-954f-451842d8f854"></script>
</head>
<body>
    <div id="main">
        <div id="info">
            <nav>
                <a href="index.html">&larr; retour à la liste des modèles</a>
            </nav>
            <h1>Grille isométrique <span class="badge">A4</span></h1>
            <p>Cette page est <a href="#" onclick="window.print(); return false;">imprimable</a> sur un format de papier A4 afin d'obtenir une grille isométrique avec des lignes verticales et des lignes à ±30°.</p>
            <h2>Options</h2>
            <div class="slider-group">
                <div class="slider-header">
                    <label for="spacing">Espacement des lignes</label>
                    <div class="value"><span id="spacingValue">5</span> mm</div>
                </div>
                <input type="range" id="spacing" name="spacing" min="2" max="20" value="5">
            </div>
            <div class="slider-group">
                <div class="slider-header">
                    <label for="margin">Largeur de la marge</label>
                    <div class="value"><span id="marginValue">5</span> mm</div>
                </div>
                <input type="range" id="margin" name="margin" min="1" max="20" value="5">
            </div>
            <div class="toggle-group">
                <label class="toggle">
                    <input type="checkbox" id="rotate">
                    <span class="slider"></span>
                    <span class="label">Rotation de la grille à 90°</span>
                </label>
            </div>
            <div class="print-button">
                <button onclick="window.print()">Imprimer</button>
            </div>
            <div class="credits">
                <a href="https://github.com/alexandregrignon/PaperKit">PaperKit</a>
            </div>
        </div>
        <div class="paper">
            <svg id="grid" width="210mm" height="297mm" xmlns="http://www.w3.org/2000/svg">
                <!-- La grille isométrique sera générée par le script -->
            </svg>
        </div>
    </div>

    <script>
        (function(){
            var pageWidth = 210;
            var pageHeight = 297;
            var svg = document.getElementById("grid");

            function createGrid(spacing, pageMargin, rotated) {
                // Définition du clip pour la marge
                svg.innerHTML = `
                    <defs>
                        <clipPath id="gridClip">
                            <rect x="${pageMargin}mm" y="${pageMargin}mm"
                                  width="${pageWidth - 2*pageMargin}mm" height="${pageHeight - 2*pageMargin}mm"/>
                        </clipPath>
                    </defs>
                `;

                // Zone effective délimitée par la marge
                var left = pageMargin, right = pageWidth - pageMargin;
                var top = pageMargin, bottom = pageHeight - pageMargin;

                // Centre exact de la page (point d'intersection commun)
                var center = {
                    x: pageWidth / 2,
                    y: pageHeight / 2
                };

                // Longueur suffisante pour tracer des lignes
                var L = 500;

                var angles = rotated ? [0, -60, 60] : [90, 30, -30];

                function drawLines(thetaDeg) {
                    var theta = thetaDeg * Math.PI / 180;
                    var d = { x: Math.cos(theta), y: Math.sin(theta) };
                    var n = { x: -Math.sin(theta), y: Math.cos(theta) };

                    // Calcul des offsets pour que le centre soit toujours sur une ligne
                    var baseOffset = n.x * center.x + n.y * center.y;
                    var normalizedOffset = Math.round(baseOffset / spacing) * spacing;

                    // Calcul des limites pour couvrir toute la zone
                    var corners = [
                        { x: left, y: top },
                        { x: right, y: top },
                        { x: left, y: bottom },
                        { x: right, y: bottom }
                    ];
                    var offsets = corners.map(function(corner) {
                        return n.x * corner.x + n.y * corner.y;
                    });
                    var minOffset = Math.min.apply(null, offsets);
                    var maxOffset = Math.max.apply(null, offsets);

                    // Ajustement des offsets pour commencer sur un multiple de l'espacement
                    var startOffset = Math.floor(minOffset / spacing) * spacing;
                    var endOffset = Math.ceil(maxOffset / spacing) * spacing;

                    for (var offset = startOffset; offset <= endOffset; offset += spacing) {
                        var base = {
                            x: center.x + (offset - normalizedOffset) * n.x,
                            y: center.y + (offset - normalizedOffset) * n.y
                        };
                        var p1 = { x: base.x - L * d.x, y: base.y - L * d.y };
                        var p2 = { x: base.x + L * d.x, y: base.y + L * d.y };

                        var line = document.createElementNS("http://www.w3.org/2000/svg", "line");
                        line.setAttribute("x1", p1.x + "mm");
                        line.setAttribute("y1", p1.y + "mm");
                        line.setAttribute("x2", p2.x + "mm");
                        line.setAttribute("y2", p2.y + "mm");
                        line.setAttribute("stroke", thetaDeg === 90 ? "#ddd" : "#bbb"); // Lignes verticales plus claires
                        line.setAttribute("stroke-width", "0.1mm");
                        line.setAttribute("clip-path", "url(#gridClip)");
                        svg.appendChild(line);
                    }
                }

                // Dessiner les trois familles de lignes
                angles.forEach(drawLines);
            }

            var spacingSlider = document.getElementById("spacing");
            var marginSlider = document.getElementById("margin");
            var rotateSwitch = document.getElementById("rotate");
            var spacingValue = document.getElementById("spacingValue");
            var marginValue = document.getElementById("marginValue");

            function updateGrid() {
                var spacing = parseInt(spacingSlider.value);
                var pageMargin = parseInt(marginSlider.value);
                var rotated = rotateSwitch.checked;

                spacingValue.textContent = spacing;
                marginValue.textContent = pageMargin;

                // Clear existing grid
                svg.innerHTML = '';
                createGrid(spacing, pageMargin, rotated);
            }

            spacingSlider.addEventListener("input", updateGrid);
            marginSlider.addEventListener("input", updateGrid);
            rotateSwitch.addEventListener("change", updateGrid);

            // Création initiale de la grille
            createGrid(5, 5, false);
        })();
    </script>
</body>
</html>