blob: ffbcea3a5f6273e4c5be87f30dffd395499b64c6 (
plain)
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
|
---
title: DOMPoint
slug: Web/API/DOMPoint
tags:
- API
- DOM
- Géométrie
- Point
- Quadrilatère
translation_of: Web/API/DOMPoint
---
<p>{{APIRef("Geometry Interfaces")}}{{ SeeCompatTable() }}</p>
<p>Un <strong><code>DOMPoint</code></strong> représente un point 2D ou 3D dans le système de coordonnées.</p>
<p>En général, un x positif représente une position à droite de l'origine ; un y positif est une position au-dessus de l'origine ; et un z positif est une position vers l'extérieur de l'écran (autrement dit, opposée à la direction de l'utilisateur).</p>
<p>Il hérite de son parent {{domxref("DOMPointReadOnly")}}.</p>
<h2 id="Constructeur">Constructeur</h2>
<dl>
<dt>{{domxref("DOMPoint.DOMPoint","DOMPoint()")}}</dt>
<dd>Crée un nouvel objet <code>DOMPoint</code>.</dd>
</dl>
<h2 id="Méthodes">Méthodes</h2>
<p><em><code>DOMPoint</code> hérite des méthodes de son parent {{domxref("DOMPointReadOnly")}}.</em></p>
<dl>
<dt>{{domxref("DOMPointReadOnly.fromPoint")}}</dt>
<dd>Traduit la position/perspective d'un <code>DOMPoint</code> à une nouvelle position (ne semble pas encore être pris en charge).</dd>
</dl>
<h2 id="Propriétés">Propriétés</h2>
<p><em><code>DOMPoint</code> hérite des propriétés de son parent {{domxref("DOMPointReadOnly")}}.</em></p>
<dl>
<dt>{{domxref("DOMPointReadOnly.x")}}</dt>
<dd>La coordonnée x du <code>DOMPoint</code>.</dd>
<dt>{{domxref("DOMPointReadOnly.y")}}</dt>
<dd>La coordonnée y du <code>DOMPoint</code>.</dd>
<dt>{{domxref("DOMPointReadOnly.z")}}</dt>
<dd>La coordonnée z du <code>DOMPoint</code>.</dd>
<dt>{{domxref("DOMPointReadOnly.w")}}</dt>
<dd>La valeur de perspective du <code>DOMPoint</code>.</dd>
</dl>
<h2 id="Specification" name="Specification">Exemples</h2>
<p>Dans l' <a href="https://developer.mozilla.org/fr/docs/Web/API/WebVR_API">API WebVR</a> (<em>VR = réalité virtuelle</em>), les valeurs <code>DOMPoint</code> sont utilisées pour représenter les points dans l'espace de coordonnées <span id="result_box" lang="fr"><span>dans lequel l'affichage monté sur la tête de l'utilisateur existe.</span></span> Dans l'extrait suivant, la position du VR HMD peut être récupérée en saisissant d'abord une référence à l'état actuel du capteur de position avec {{domxref("PositionSensorVRDevice.getState")}}, puis en accédant au résultat de la {{domxref("VRPositionState.position","position")}} de la propriété {{domxref("VRPositionState")}}, qui renvoie un <code>DOMPoint</code>. Notez ci-dessous l'utilisation de <code>position.x</code>, <code>position.y</code> et <code>position.z</code>.</p>
<pre class="brush: js">function setView() {
var posState = gPositionSensor.getState();
if(posState.hasPosition) {
posPara.textContent = 'Position: x' + roundToTwo(posState.position.x) + " y"
+ roundToTwo(posState.position.y) + " z"
+ roundToTwo(posState.position.z);
xPos = -posState.position.x * WIDTH * 2;
yPos = posState.position.y * HEIGHT * 2;
if(-posState.position.z > 0.01) {
zPos = -posState.position.z;
} else {
zPos = 0.01;
}
}
...
}</pre>
<div class="note">
<p><strong>Note </strong>: Voir notre <a href="https://github.com/mdn/webvr-tests/blob/gh-pages/positionsensorvrdevice/index.html">positionsensorvrdevice demo</a> pour le code complet.</p>
</div>
<h2 id="Specification" name="Specification">Spécifications</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Spécification</th>
<th scope="col">Statut</th>
<th scope="col">Commentaire</th>
</tr>
<tr>
<td>{{SpecName('Geometry Interfaces', '#DOMPoint', 'DOMPoint')}}</td>
<td>{{Spec2('Geometry Interfaces')}}</td>
<td>Dernière version de la spécification est un ED.</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Fonctionnalité</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatChrome(61)}}<br>
<br>
</td>
<td>{{CompatVersionUnknown}}<br>
</td>
<td>{{ CompatNo }}</td>
<td>
<p>{{ CompatNo }}</p>
</td>
<td>{{ CompatNo }}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Fonctionnalité</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>Firefox OS (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
<th>Chrome for Android</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{ CompatNo }}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{ CompatNo }}</td>
<td>{{ CompatNo }}</td>
<td>{{ CompatNo }}</td>
<td>{{ CompatNo }}</td>
<td>{{ CompatNo }}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li>{{domxref("DOMRect")}}</li>
</ul>
|
