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
|
<html>
<head>
<title>Outils mobiles (développement)</title>
<meta charset="utf-8" />
<script type="text/javascript" src="schoolkit.js"></script>
<style type="text/css">
.svg_container {
border: 1px solid #aaa;
z-index: 10;
display: inline-block;
vertical-align: top;
}
</style>
</head>
<body>
<h1 style="color: orange;">Des outils graphiques mobiles (développement)</h1>
<h2>Comment ajouter un outil</h2>
<p>
La classe JavaScript GeomToolFromFile permet de mettre en place des
objets issus de fichiers SVG. Exemple :
</p>
<pre>
let p = new GeomPaper("canvas_container1", 1000, 600);
let o3 = new GeomToolFromFile(
p, "equerre01",
"/usr/share/javascript/schoolkit/equerre01.svg",
new DOMPoint(300,150),
1);
</pre>
<p>
Le fichier SVG doit contenir
<ul>
<li>Un groupe <g> avec un attribut id="layer1" ;
ce groupe doit ensuite contenir :</li>
<li>Un cercle <circle> dont le centre, définit par les
attributs cx et cy servira de point de rotation pour l'outil
géométrique ; ce cercle aura un attribut id="centre" ;
</li>
<li>Un élément graphique quelconque, avec un attribut
id="rotation_handle" ; il faut éviter que cet élément empiète
sur le centre, car il servira à contrôler la rotation par
tirer-glisser ;
</li>
<li>Un élément graphique quelconque, avec un attribut
id="translation_handle" qui servira à contrôler la translation par
tirer-glisser ;
</li>
<li>
On peut ajouter autant d'éléments graphiques qu'on veut à ceux-là.
</li>
</ul>
</p>
<h2>Démo</h2>
<div class="svg_container" id="canvas_container1"></div>
<script>
let p = new GeomPaper("canvas_container1", 1000, 600);
p.quadrillage();
let o1 = new GeomToolFromFile(p, "rapporteur01", "rapporteur01.svg",
new DOMPoint(500,300), 1);
// let o2 = new DoubleDecimetre(p, 105, 100, "dd01")
// p.addTool(o2, new DOMPoint(100,100), 3);
let o2 = new GeomToolFromFile(p, "dd01", "double_decimetre01.svg",
new DOMPoint(100,100), 1);
let o3 = new GeomToolFromFile(p, "equerre01", "equerre01.svg",
new DOMPoint(300,150), 1);
</script>
<div style="display: inline-block; vertical-align: top;">
<button onclick="p.rescale(0.8)">-20%</button><br/>
<button onclick="p.rescale(1.2)">+20%</button>
</div>
</body>
</html>
|
