diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/zh-cn/web/api/dompoint | |
parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip |
initial commit
Diffstat (limited to 'files/zh-cn/web/api/dompoint')
-rw-r--r-- | files/zh-cn/web/api/dompoint/dompoint/index.html | 68 | ||||
-rw-r--r-- | files/zh-cn/web/api/dompoint/index.html | 100 | ||||
-rw-r--r-- | files/zh-cn/web/api/dompoint/w/index.html | 45 | ||||
-rw-r--r-- | files/zh-cn/web/api/dompoint/x/index.html | 45 | ||||
-rw-r--r-- | files/zh-cn/web/api/dompoint/y/index.html | 45 | ||||
-rw-r--r-- | files/zh-cn/web/api/dompoint/z/index.html | 45 |
6 files changed, 348 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/dompoint/dompoint/index.html b/files/zh-cn/web/api/dompoint/dompoint/index.html new file mode 100644 index 0000000000..2688405313 --- /dev/null +++ b/files/zh-cn/web/api/dompoint/dompoint/index.html @@ -0,0 +1,68 @@ +--- +title: DOMPoint.DOMPoint() +slug: Web/API/DOMPoint/DOMPoint +translation_of: Web/API/DOMPoint/DOMPoint +--- +<div>{{APIRef("DOM")}}</div> + +<p><span class="seoSummary"><strong><code>DOMPoint()</code></strong>构造函数创建并返回一个 {{domxref("DOMPoint")}} 对象,可提供部分或全部属性值作为其参数。</span></p> + +<p>也可以通过调用静态方法 {{domxref("DOMPoint.fromPoint()")}} 来创建 <code>DOMPoint</code> 。此方法接受一个 {{domxref("DOMPointInit")}} 兼容对象(<code>DOMPoint</code> 或 {{domxref("DOMPointReadOnly")}})作为参数 。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><em>point</em> = new DOMPoint(<em>x</em>, <em>y</em>, <em>z</em>, <em>w</em>);</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>x</code> {{optional_inline}}</dt> + <dd><code>x</code> 坐标。</dd> + <dt><code>y</code> {{optional_inline}}</dt> + <dd><code>y</code> 坐标。</dd> + <dt><code>z</code> {{optional_inline}}</dt> + <dd><code>z</code> 坐标。</dd> + <dt><code>w</code> {{optional_inline}}</dt> + <dd>透视值。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<p>示例首先创建了一个表示当前窗口左上角的 <code>DOMPoint</code> ,接着根据第一个点创建一个新的 <code>DOMPoint</code> 并将其在垂直和水平方向上偏移100px。</p> + +<pre class="brush: js">var windTopLeft = new DOMPoint(window.screenX, window.screenY); +var newTopLeft = DOMPoint.fromPoint(windTopLeft); +newTopLeft.x += 100; +newTopLeft.y += 100; +</pre> + +<h2 id="Specification" name="Specification">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Geometry Interfaces', '#dom-dompoint-dompoint', 'DOMPoint()')}}</td> + <td>{{Spec2('Geometry Interfaces')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.DOMPoint.DOMPoint")}}</p> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>{{domxref("DOMPointReadOnly.DOMPoint", "DOMPointReadOnly()")}}</li> + <li>{{domxref("DOMRect")}}</li> + <li>{{domxref("DOMMatrix")}}</li> +</ul> diff --git a/files/zh-cn/web/api/dompoint/index.html b/files/zh-cn/web/api/dompoint/index.html new file mode 100644 index 0000000000..293859c636 --- /dev/null +++ b/files/zh-cn/web/api/dompoint/index.html @@ -0,0 +1,100 @@ +--- +title: DOMPoint +slug: Web/API/DOMPoint +translation_of: Web/API/DOMPoint +--- +<div>{{APIRef("DOM")}}</div> + +<p><span class="seoSummary">DOMPoint 对象表示坐标系中的2D 或3D 点;它包括三维度的坐标值以及可选的透视值。DOMPoint 基于 DOMPointReadOnly, 但允许更改其属性值。</span></p> + +<p><span class="seoSummary">通常, 正 x 分量表示原点右侧的位置, 正 y 分量从原点向下, 正 z 分量从屏幕向外延伸 (换言之, 朝向用户)。</span></p> + +<h2 id="Constructor">Constructor</h2> + +<dl> + <dt>{{domxref("DOMPoint.DOMPoint","DOMPoint()")}}</dt> + <dd>Creates and returns a new <code>DOMPoint</code> object given the values of zero or more of its coordinate components and optionally the <code>w</code> perspective value. You can also use an existing <code>DOMPoint</code> or <code>DOMPointReadOnly</code> or a {{domxref("DOMPointInit")}} dictionary to create a new point by calling the {{domxref("DOMPoint.fromPoint()")}} static method.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p><em><code>DOMPoint</code> inherits methods from its parent, {{domxref("DOMPointReadOnly")}}.</em></p> + +<dl> + <dt>{{domxref("DOMPointReadOnly.fromPoint", "fromPoint()")}}</dt> + <dd>Creates a new mutable <code>DOMPoint</code> object given an existing point or a {{domxref("DOMPointInit")}} dictionary which provides the values for its properties.</dd> +</dl> + +<h2 id="Properties">Properties</h2> + +<p><em><code>DOMPoint</code> inherits properties from its parent, {{domxref("DOMPointReadOnly")}}.</em></p> + +<dl> + <dt>{{domxref("DOMPointReadOnly.x", "DOMPoint.x")}}</dt> + <dd>The x coordinate of the <code>DOMPoint</code>.</dd> + <dt>{{domxref("DOMPointReadOnly.y", "DOMPoint.y")}}</dt> + <dd>The y coordinate of the <code>DOMPoint</code>.</dd> + <dt>{{domxref("DOMPointReadOnly.z", "DOMPoint.z")}}</dt> + <dd>The z coordinate of the <code>DOMPoint</code>.</dd> + <dt>{{domxref("DOMPointReadOnly.w", "DOMPoint.w")}}</dt> + <dd>The perspective value of the <code>DOMPoint</code>.</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<p>In the <a href="/en-US/docs/Web/API/WebVR_API">WebVR API</a>, <code>DOMPoint</code> values are used to represent points in the coordinate space that the user's head mounted display exists in. In the following snippet, the position of the VR HMD can be retrieved by first grabbing a reference to the position sensor's current state using {{domxref("PositionSensorVRDevice.getState()")}}, then accessing the resulting {{domxref("VRPositionState")}}'s {{domxref("VRPositionState.position","position")}} property, which returns a <code>DOMPoint</code>. Note below the usage of <code>position.x</code>, <code>position.y</code>, and <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>: See our <a href="https://github.com/mdn/webvr-tests/blob/gh-pages/positionsensorvrdevice/index.html">positionsensorvrdevice demo</a> for the full code.</p> +</div> + +<h2 id="Specification" name="Specification">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Geometry Interfaces', '#DOMPoint', 'DOMPoint')}}</td> + <td>{{Spec2('Geometry Interfaces')}}</td> + <td>Latest spec version is an ED.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.DOMPoint")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("DOMRect")}}</li> + <li>{{domxref("DOMMatrix")}}</li> +</ul> diff --git a/files/zh-cn/web/api/dompoint/w/index.html b/files/zh-cn/web/api/dompoint/w/index.html new file mode 100644 index 0000000000..f52da8de19 --- /dev/null +++ b/files/zh-cn/web/api/dompoint/w/index.html @@ -0,0 +1,45 @@ +--- +title: DOMPoint.w +slug: Web/API/DOMPoint/w +translation_of: Web/API/DOMPoint/w +--- +<div>{{APIRef("DOM")}}</div> + +<p><span class="seoSummary"><code><strong>DOMPoint</strong></code> 的 w 属性表示该点的空间透视值。</span></p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">var <em>perspective</em> = <em>DOMPoint</em>.w;</pre> + +<h3 id="值">值</h3> + +<p>双精度浮点值,表示该点的空间透视值。这个值的类型并没有严格限制,意味着它可以是 {{jsxref("NaN")}} 或 {{jsxref("Infinity", "±Infinity")}}。 默认值为 1.0。</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Geometry Interfaces', '#dom-dompoint-w', 'w')}}</td> + <td>{{Spec2('Geometry Interfaces')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.DOMPointReadOnly.w")}}</p> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>其他坐标属性:{{domxref("DOMPoint.x", "x")}},{{domxref("DOMPoint.y", "y")}},{{domxref("DOMPoint.z", "z")}}.</li> +</ul> diff --git a/files/zh-cn/web/api/dompoint/x/index.html b/files/zh-cn/web/api/dompoint/x/index.html new file mode 100644 index 0000000000..d695b9d1a6 --- /dev/null +++ b/files/zh-cn/web/api/dompoint/x/index.html @@ -0,0 +1,45 @@ +--- +title: DOMPoint.x +slug: Web/API/DOMPoint/x +translation_of: Web/API/DOMPoint/x +--- +<div>{{APIRef("DOM")}}</div> + +<p><span class="seoSummary"><code><strong>DOMPoint</strong></code> 的 x 属性表示该点的水平坐标。</span> 通常, <code>x</code> 的正值表示右边,负值表示左边,除非改变了默认的轴方向。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">var <em>xPos</em> = <em>DOMPoint</em>.x;</pre> + +<h3 id="值">值</h3> + +<p>双精度浮点值,表示该点的 x 坐标值。这个值的类型并没有严格限制,意味着它可以是 {{jsxref("NaN")}} 或 {{jsxref("Infinity", "±Infinity")}}。</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Geometry Interfaces', '#dom-dompoint-x', 'x')}}</td> + <td>{{Spec2('Geometry Interfaces')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.DOMPointReadOnly.x")}}</p> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>其他坐标属性:{{domxref("DOMPoint.y", "y")}},{{domxref("DOMPoint.z", "z")}},透视值 {{domxref("DOMPoint.w", "w")}}.</li> +</ul> diff --git a/files/zh-cn/web/api/dompoint/y/index.html b/files/zh-cn/web/api/dompoint/y/index.html new file mode 100644 index 0000000000..ea4baedabd --- /dev/null +++ b/files/zh-cn/web/api/dompoint/y/index.html @@ -0,0 +1,45 @@ +--- +title: DOMPoint.y +slug: Web/API/DOMPoint/y +translation_of: Web/API/DOMPoint/y +--- +<div>{{APIRef("DOM")}}</div> + +<p><span class="seoSummary"><code><strong>DOMPoint</strong></code> 的 <code><strong>y</strong></code> 属性表示该点的垂直坐标。</span><code>y</code> 值增加表示向下偏移,减小表示向上偏移,除非改变了默认轴方向。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">var <em>yPos</em> = <em>DOMPoint</em>.y;</pre> + +<h3 id="值">值</h3> + +<p>双精度浮点值,表示该点的 y 坐标值。这个值的类型并没有严格限制,意味着它可以是 {{jsxref("NaN")}} 或 {{jsxref("Infinity", "±Infinity")}}。</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Geometry Interfaces', '#dom-dompoint-y', 'y')}}</td> + <td>{{Spec2('Geometry Interfaces')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.DOMPointReadOnly.y")}}</p> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>其他坐标属性: {{domxref("DOMPoint.x", "x")}}, {{domxref("DOMPoint.z", "z")}}, 透视值 {{domxref("DOMPoint.w", "w")}}。</li> +</ul> diff --git a/files/zh-cn/web/api/dompoint/z/index.html b/files/zh-cn/web/api/dompoint/z/index.html new file mode 100644 index 0000000000..e813e18954 --- /dev/null +++ b/files/zh-cn/web/api/dompoint/z/index.html @@ -0,0 +1,45 @@ +--- +title: DOMPoint.z +slug: Web/API/DOMPoint/z +translation_of: Web/API/DOMPoint/z +--- +<div>{{APIRef("DOM")}}</div> + +<p><span class="seoSummary"><code><strong>DOMPoint</strong></code> 的 <code><strong>z</strong></code> 属性表示该点的深度坐标。</span> <code>z</code> 值为 0 表示屏幕平面,正值表示从屏幕前面向靠近用户的方向延伸,负值表示从屏幕后面向远离用户的方向延伸,除非改变了默认的轴方向。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">var <em>zPos</em> = <em>DOMPoint</em>.z;</pre> + +<h3 id="值">值</h3> + +<p>双精度浮点值,表示该点的 z 坐标值。这个值的类型并没有严格限制,意味着它可以是 {{jsxref("NaN")}} 或 {{jsxref("Infinity", "±Infinity")}}。</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Geometry Interfaces', '#dom-dompoint-z', 'z')}}</td> + <td>{{Spec2('Geometry Interfaces')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.DOMPointReadOnly.z")}}</p> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>其他坐标属性:{{domxref("DOMPoint.x", "x")}}, {{domxref("DOMPoint.y", "y")}},透视值 {{domxref("DOMPoint.w", "w")}}。</li> +</ul> |