Returns the X radius of the ellipse that most closely circumscribes the area of contact with the touch surface. The value is in CSS pixels of the same scale as
Touch.screenX
.
This value, in combination with
Touch.radiusY
and
Touch.rotationAngle
constructs an ellipse that approximates the size and shape of the area of contact between the user and the screen. This may be a relatively large ellipse representing the contact between a fingertip and the screen or a small area representing the tip of a stylus, for example.
注意： This attribute has not been formally standardized. It is specified in the Touch Events – Level 2 草案 specification and not in 触摸事件 推荐 . This attribute is not widely implemented.
var xRadius = touchItem.radiusX;
xRadius
The X radius of the ellipse that most closely circumscribes the area of contact with the touch surface.
This example illustrates using the
触摸
接口的
Touch.radiusX
,
Touch.radiusX
and
Touch.rotationAngle
特性。
Touch.radiusX
property is the radius of the ellipse which most closely circumscribes the touching area (e.g. finger, stylus) along the axis
indicated
by the touch point's
Touch.rotationAngle
. Likewise, the
Touch.radiusY
property is the radius of the ellipse which most closely circumscribes the touching area (e.g. finger, stylus) along the axis
perpendicular
to that indicated by
Touch.rotationAngle
。
Touch.rotationAngle
is the angle (in degrees) that the ellipse described by
radiusX
and
radiusY
is rotated clockwise about its center.
The following simple code snippet, registers a single handler for the
touchstart
,
touchmove
and
touchend
events. When the
src
element is touched, the element's width and height will be calculate based on the touch point's
radiusX
and
radiusY
values and the element will then be rotated using the touch point's
rotationAngle
.
<div id="src"> ... </div>
var src = document.getElementById("src");
src.addEventListener('touchstart', rotate);
src.addEventListener('touchmove', rotate);
src.addEventListener('touchend', rotate);
function rotate (e) {
var touch = e.changedTouches.item(0);
// Turn off default event handling
e.preventDefault();
// Rotate element 'src'.
src.style.width = touch.radiusX * 2 + 'px';
src.style.height = touch.radiusY * 2 + 'px';
src.style.transform = "rotate(" + touch.rotationAngle + "deg)";
};
| 规范 | 状态 | 注释 |
|---|---|---|
| Touch Events – Level 2 | 草案 | 非稳定版本。 |
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
radiusX
|
Chrome 43 | Edge ≤79 | Firefox ? | IE No | Opera Yes | Safari No | WebView Android 43 | Chrome Android 43 | Firefox Android Yes | Opera Android Yes | Safari iOS Yes | Samsung Internet Android 4.0 |
完整支持
不支持
兼容性未知
实验。期望将来行为有所改变。