/
192.txt
89 lines (62 loc) · 3.26 KB
/
192.txt
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
[1] [[Web]] では、[[左上隅]]を[[原点]]とし、[[水平]]方向を [VAR[X]] 軸、
[[垂直]]方向を [VAR[Y]] 軸として[[右下]]が[[正]]の方向になる[[座標系]]を採用しています。
[2] 次の場面でこの[[座標系]]が採用されています。
[FIG(short list)[
- [[CSS]]/[[CSSOM]]
- [[SVG]]
- [CODE(HTML)@en[2d]]
- [CODE(DOMi)@en[MouseEvent]]
- [[サーバー側画像写像]]
- [[クライアント側画像写像]]
- [[媒体素片]] [CODE(URI)[[[xywh]]]]
]FIG]
* 仕様書
[REFS[
- [13] [CITE@en[CSSOM View Module]]
([TIME[2016-08-06 08:18:46 +09:00]])
<https://drafts.csswg.org/cssom-view/#scrolling-area-origin>
- [14] [CITE@en[CSSOM View Module]] ([TIME[2016-08-06 08:18:46 +09:00]]) <https://drafts.csswg.org/cssom-view/#extensions-to-the-window-interface>
]REFS]
* 負
[3] [[負]]の方向もありますが、制限もあります。
[4] [[媒体素片]]では構文的に[[負]]の値は表現できません。
* 小数
[5] [[座標]]上の値は基本的には[[画素]]単位となっていますが、
[[小数]]の[[座標]]も表現できることがあります。
[6] [[媒体素片]]では構文的に[[画素]]単位または[[百分率]]単位に満たない値は表現できません。
* [VAR[Z]] 軸
[7] [[CSS]] では [CODE(CSS)@en[[[z-index]]]] [[特性]]により前後方向を指定できます。
しかし [VAR[X]] や [VAR[Y]] とは違って無単位の値になっています。
;; [8] [VAR[X]] や [VAR[Y]] の軸とは違って前後方向に対して斜めに表示できません。
* 座標変換
[9] [[画像写像]]は [[CSS]] による変形の結果に対する座標となっています。
[10] [[媒体素片]]は[[アスペクト比]]の変換等の変形の結果に対する座標となっています。
* 具体的な座標系
[15] 次の[[座標系]]は、いずれも[[原点]]の[[左辺]]からの[[CSS画素]]数を [VAR[X]] とし、
[[上辺]]からの[[CSS画素]]数を [VAR[Y]] とするものです。
[18] [[画面]]では、[[出力装置]]の左上隅が[[原点]]です。
[16] 次の機能で使われています [SRC[>>14]]。
[FIG(list short)[
- [CODE(DOMm)@en[moveTo]]
- ([CODE(DOMm)@en[moveBy]])
- [CODE(DOMa)@en[window.screenX]]
- [CODE(DOMa)@en[window.screenY]]
- [CODE(DOMm)@en[window.open]] [CODE(DOM)@en[left]]
- [CODE(DOMm)@en[window.open]] [CODE(DOM)@en[top]]
]FIG]
;; [21] [[マルチディスプレイ]]環境については、[[画面]]を参照。
[17] [[窓][窓 (Web)]]では、当該[[窓][窓 (Web)]]の左上隅が[[原点]]です。
[19] 次の機能で使われています [SRC[>>14]]。
[FIG(list short)[
- [CODE(DOMm)@en[resizeTo]]
- ([CODE(DOMm)@en[resizeBy]])
]FIG]
* 円形画面の座標系
@@ [20] [[時計]]などの円形画面を持つ[[装置]]
* 歴史
[11] [CITE@en[Bug 28029 – Mouse coordinates represented in CSS pixels do not account for retina displays with window.devicePixelRatio > 1.]]
([TIME[2015-02-17 19:41:40 +09:00]] 版)
<https://www.w3.org/Bugs/Public/show_bug.cgi?id=28029#c6>
[12] [CITE[Blink Coordinate Spaces - The Chromium Projects]]
([TIME[2015-03-21 10:14:33 +09:00]] 版)
<https://www.chromium.org/developers/design-documents/blink-coordinate-spaces>