O interakcji, w tym o obsłudze dotyku, myszy, klawiatury, pióra.
User interaction
Use direct manipulation without timed interactions.
Identifying input devices
var mouseCapabilities = new Windows.Devices.Input.MouseCapabilities();
mouseCapabilities.mousePresent, mouseCapabilities.verticalWheelPresent, mouseCapabilities.horizontalWheelPresent, mouseCapabilities.swapButtons, mouseCapabilities.numberOfButtons
var keyboardCapabilities = new Windows.Devices.Input.KeyboardCapabilities();
keyboardCapabilities.keyboardPresent
var touchCapabilities = new Windows.Devices.Input.TouchCapabilities();
touchCapabilities.touchPresent, touchCapabilities.contacts
pointer input (touch, pen, or mouse)
var pointerDevices = Windows.Devices.Input.PointerDevice.getPointerDevices();
pointerDevices[i].pointerDeviceType, pointerDevices[i].isIntegrated, pointerDevices[i].maxContacts, pointerDevices[i].physicalDeviceRect.x/y, pointerDevices[i].physicalDeviceRect.width/height, pointerDevices[i].screenRect.x/y, pointerDevices[i].screenRect.width/height
Touch input
Panning, Optical zoom, Semantic zoom, Rotation, Cross-slide, Cross-slide (a selection or a drag-and-drop), Visual feedback,
Panning
Set the Cascading Style Sheets (CSS) overflow property to scroll, auto, or inherit (as long as the parent element is set to scroll or auto) to enable panning in your application. You can configure the panning controls of the content area through the CSS -ms-overflow-style property. This style supports the following values: auto (scrollbars - IE, auto hiding scrollbars or panning indicators - Metro apps), none, scrollbar, -ms-autohiding-scrollbar
#Div1
{
overflow: scroll;
}
Customization: highlight-color, face-color, arrow-color, track-color, base-color
#Div1
{
scrollbar-face-color:#903030;
scrollbar-arrow-color:#FFFFFF;
scrollbar-track-color:#C0B0B0;
scrollbar-highlight-color:rgb(0,0,0);
}
Optical zoom
Use the Cascading Style Sheets (CSS) property, css-ms-content-zooming, to enable optical zoom on an element. Optical zoom is supported only by non-replaced elements; it is not supported by replaced elements (those outside the scope of the CSS formatter, such as an image, embedded document, or applet). For a replaced element to support optical zoom, the -ms-content-zooming style must be applied to a non-replaced parent element.
When users lift their fingers during zooming or resizing, you can maintain the on-screen action until stopped through deceleration physics (or inertia). You can use snap points to influence this behavior by providing logical zoom levels, such as 100%, at which to stop.
#Div1
{
overflow:scroll;
-ms-content-zooming: zoom;
-ms-content-zoom-boundary-min: 10%;
-ms-content-zoom-boundary-max: 200%;
-ms-content-zoom-snap-type: mandatory;
-ms-contnet-zoom-snap-points: snapList(50%,100%,150%,200%);
}
You can embed one element that supports zoom inside another. When this is necessary, you should declare a specific zoom behavior. This is called zoom chaining. Zoom chaining specifies that when a zoom boundary (minimum or maximum) is reached for an embedded element, zoom is then initiated on the parent element.
#Div2
{
overflow:scroll;
-ms-content-zooming: zoom;
-ms-content-zoom-boundary-min: 10%;
-ms-content-zoom-boundary-max: 200%;
-ms-content-zoom-chaining: chained;
}
Semantic zoom
To enable semantic zoom on an element, the -ms-content-zooming style must be applied to the element. This style supports isotropic zoom (identical scaling in all directions). Semantic zoom is supported only by non-replaced elements; it is not supported by replaced elements (those outside the scope of the CSS formatter, such as an image, embedded document, or applet). For a replaced element to support semantic zoom, the -ms-content-zooming style must be applied to a non-replaced parent element.
Enable basic zoom support on an element with JavaScript and DOM
var sezoutils = new SezoUtils();
var sezo = sezoutils.CreateSezoControl(Constants.SezoDivId, null, true);
There are two types of snap-points: proximity (gravity wells that assist with selecting a zoom level) and mandatory (specific zoom-level constraints). In addition, there are two ways to specify snap-points: specifying intervals or a specific list. A "gravity well" is a feature in which a target exerts a "gravitational pull" towards some specific value or location to influence its selection.
The first section of the code specifies proximity snap points with the first one at 25% zoom and subsequent snap points at each 25% zoom increment. The second section specifies mandatory snap points at 50%, 100%, 150%, and 200%.
#Div1
{
overflow:scroll;
-ms-content-zooming: isotropic;
-ms-content-zoom-boundary-min: 10%;
-ms-content-zoom-boundary-max: 200%;
-ms-content-zoom-snap-type: proximity; / mandatory;
-ms-contnet-zoom-snap-points: snapInterval(25%,25%); / snapList(50%,100%,150%,200%);
}
Zoom chaining
Zoom is programmatically exposed through the msScrollTo and msScrollToRectangle methods. In turn, using these methods exposes the default zoom animation behavior through the -ms-zoom-animation attribute. The -ms-zoom-animation attribute does not affect the zoom animation when zooming manually.
#Div1
{
overflow:scroll;
-ms-content-zooming: isotropic;
-ms-content-zoom-boundary-min: 10%;
-ms-content-zoom-boundary-max: 200%;
–ms-zoom-animation : default;
}
Reset the zoom level to 100%
Function onClick(event)
{
event.srcElement.msZoomTo(100%);
}Panning
Panning physics are not exposed programmatically.
The Scroll Control is a just-in-time control: the panning indicator is only visible when the touch contact is within the pannable region. Similarly, the scroll bar is only visible when the mouse cursor or keyboard focus is within the scrollable region.
Panning indicators are similar to the scroll box in a scroll bar. They indicate the proportion of displayed content to total pannable area and the relative position of the displayed content in the pannable area.
Windows Developer Preview supports three types of panning:
- Single axis - panning is supported in one direction only (horizontal or vertical).
- Rails - panning is supported in all directions. However, once the user crosses a distance threshold in a specific direction, then panning is restricted to that axis.
- Freeform - panning is supported in all directions.
Snap points can be used to influence panning behavior by providing logical points within the content at which to stop panning and ensure a specific subset of content is displayed in the viewport.
There are two types of snap-points: proximity ("gravity wells" that make viewing a subset of content easier) and mandatory (specific paging constraints). Snap-point values are specified by a list of intervals or absolute values.
A "gravity well" is a feature in which a target exerts a "gravitational pull" toward some specific value or location to influence its selection.
Panning snap-points are useful for applications such as web browsers and photo albums that emulate paginated content or have logical groupings of items that can be dynamically regrouped to fit within a viewport or display.
Unlike standard scroll bars, panning indicators are purely informative. They are not exposed to Windows Touch and cannot be manipulated in any way.
Don't chain or place one pannable region within another pannable region if they both pan in the same direction.
Both optical zoom and resizing are performed through direct manipulation with the pinch interaction (moving the fingers closer together zooms in and moving them apart zooms out), or by holding the CTRL key down while scrolling the mouse scroll wheel, or by holding the CTRL key down and pressing the + or - key.
Resizing physics should be turned on. These include the following:
- Acceleration: Repeated pinching accelerates resizing. This helps the user to reach the maximum or minimum size quickly.
- Deceleration: Resizing decelerates when the user stops pinching. This is similar to sliding to a stop on a slippery surface.
- Absorption: Resizing momentum during deceleration causes a slight bounce-back effect if a resizing constraint is reached.
Semantic zoom
A smooth cross-fade animation is used for the transition from one semantic zoom to another. This is the default Windows Touch behavior and cannot be customized.
The number of pages (or screens) in a semantic view should never exceed three.
Rotation
Windows Developer Preview supports three types of rotation: free, constrained, and combined.
Free rotation
Free rotation enables a user to rotate content freely anywhere in a 360 degree arc. When the user releases the object, the object remains in the chosen position. Free rotation is useful for drawing and layout applications such as Microsoft PowerPoint, Word, Visio, and Paint; and Adobe Photoshop, Illustrator, and Flash.Constrained rotation
Constrained rotation supports free rotation during the manipulation but enforces snap points at 90 degree increments (0, 90, 180, and 270) upon release. When the user releases the object, the object automatically rotates to the nearest snap point.
Constrained rotation is the most common method of rotation, and it functions in a similar way to scrolling content. Constrained rotation is useful for applications such as web browsers and photo albums.
Combined rotation
Combined rotation supports free rotation with a gravity well at each of the 90 degree snap points enforced by constrained rotation. When the user releases the object, the object remains in the chosen position; the object does not automatically rotate to a snap point.
Selection basket
The selection basket is a visually distinct and dynamic representation of items that have been selected from the primary list or collection in the application. This feature is useful for tracking selected items and should be used by applications where:
- Items can be selected from multiple locations
- Many items can be selected
- An action or command relies upon the selection list
Items in the selection basket can be removed with a cross-slide selection interaction on the item in the basket. This, in turn, cancels the selection of the corresponding item in the primary list. Canceling the selection in the primary list removes the item from the basket.
Queues
The selection basket also enables a user to select and cancel all items in the current list or collection at once by using a single interaction.
A queue is not equivalent to the selection basket list and should not be treated as such. The primary distinctions include:
- The list of items in the selection basket is only a visual representation; the items in a queue are assembled with a specific action in mind.
- Items can be represented only once in the selection basket but multiple times in a queue.
The order of items in the selection basket represents the order of selection. The order of items in a queue is directly related to functionality.
Do not show visual feedback during panning or dragging.
When a user touches a photograph in the photo album (without dragging the photograph) the photograph slides down (as if being dragged) to reveal the selection check mark that would appear if the photograph were dragged to the selection basket.
The context menu should be used only where selection is not possible.
Ink
<canvas id="myCanvas" withd="1000" height="1000"></canvas>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");- MSPointerDown, which fires when a user presses down—either on the screen with a pen, or by clicking a mouse button.
- MSPointerMove, which fires when the pointer moves across the canvas.
- MSPointerUp, which fires when the user lifts a pen or a finger, or when they release the mouse button.
canvas.addEventListener("MSPointerDown", handlePointerDown, false);
canvas.addEventListener("MSPointerMove", handlePointerMove, false);
canvas.addEventListener("MSPointerUp", handlePointerUp, false);
var inkManager = new Windows.UI.Input.Inking.InkManager();
function handlePointerDown(event) {
if ((event.pointerType === 3) || ((event.pointerType === 4) && (event.button === 1))) {
inkManager.processPointerDown(event.currentPoint);
context.beginPath();
context.moveTo(event.currentPoint.rawPosition.x, event.currentPoint.rawPosition.y);
}
}
function handlePointerMove(event) {
if ((event.pointerType === 3) || ((event.pointerType === 4) && (event.button === 1))) {
inkManager.processPointerUpdate(event.currentPoint);
context.lineTo(event.currentPoint.rawPosition.x, event.currentPoint.rawPosition.y);
context.stroke();
}
}
function handlePointerUp(event) {
if ((event.pointerType === 3) || ((event.pointerType === 4) && (event.button === 1))) {
inkManager.processPointerUp(event.currentPoint);
context.lineTo(event.currentPoint.rawPosition.x, event.currentPoint.rawPosition.y);
context.stroke();
context.closePath();
}
renderAllStrokes();
}
function renderAllStrokes() {
inkManager.getStrokes().forEach(function (stroke) {
var first = true;
stroke.getRenderingSegments().forEach(function (segment) {
if (first) {
context.moveTo(segment.position.x, segment.position.y);
first = false;
} else {
context.bezierCurveTo(segment.bezierControlPoint1.x,
segment.bezierControlPoint1.y,
segment.bezierControlPoint2.x,
segement.bezierControlPoint2.y
segment.position.x,
segment.position.y);
}
});
});
context.stroke();
context.closePath();
}
There are two ways to render ink on the screen. The first way, as shown in handlePointerMove, uses lineTo to display the ink. This improves the performance of your app, but sacrifices some accuracy. The second way, as shown with the renderAllStrokes function, uses bezierCurveTo , which takes more time to process but provides much greater accuracy and smoothness.
c.d.n
Posty
Brak komentarzy:
Prześlij komentarz