iosview的缩放和平移

诸如Internet Explorer 10之类的新浏览器具有使用手势事件的高级触摸体验。 您可以采取一些第一步措施 ，以确保您的网站变得易于触摸，并使其在许多输入设备上都能正常运行，同时支持许多现代浏览器。 在本文中，我将向您展示如何进行。

让我们从浏览器表面测试驱动器演示中的手势事件开始：

ios 移动和缩放 苹果移动和缩放_ios 移动和缩放

用户可以使用“ 浏览器表面”演示 来拖动，收缩和旋转照片

这在JavaScript中引入了手势识别对象 。 站点可以创建手势对象，确定要处理的指针（鼠标，笔或触摸触点），并将手势事件指向所需的任何元素。 然后，浏览器计算正在执行的手势，并通过事件通知页面。 这使开发人员能够构建任何其他浏览器中尚无法实现的手势体验。 其中包括多个并发手势，例如，用手旋转两个拼图块。

让我们看一下它在代码中的工作方式。

创建手势对象

在您的站点中处理手势的第一步是实例化手势对象。

var myGesture = new MSGesture();

接下来，给手势一个目标元素。 这是浏览器将触发手势事件的元素。 也是确定事件坐标空间的元素。 

elm = document.getElementById("someElement"); 
myGesture.target = elm; 
elm.addEventListener("MSGestureChange", handleGesture);

最后，告诉手势对象在手势识别中要处理哪些指针。 

elm.addEventListener("MSPointerDown", function (evt) {
    // adds the current mouse, pen, or touch contact for gesture recognition 
    myGesture.addPointer(evt.pointerId); 
});

注意：不要忘记您需要使用–ms-touch-action来配置元素以不执行默认的触摸操作（如平移和缩放），而是为输入提供指针事件。

处理手势事件

手势对象具有有效目标并至少添加了一个指针后，它将开始触发手势事件。 手势事件有两种形式：静态手势（例如点击或按住）和动态手势（例如捏，旋转或轻扫）。

点按

最基本的手势识别是Tap。 当检测到轻敲时，将在手势对象的目标元素上触发MSGestureTap事件。 与单击事件不同，仅当用户上下移动（或按下鼠标按钮或触摸笔）时，才触发点击手势。 如果要区分用户点击元素与拖动元素之间的区别，这通常很有用。

按下并按住不动

当用户用一根手指触摸，保持一会儿并抬起而没有移动时，就会发生按住手势。 在按住状态的交互过程中， MSGestureHold事件针对手势的各种状态触发多次： 

element.addEventListener("MSGestureHold", handleHold); 
function handleHold(evt) 
    { if (evt.detail & evt.MSGESTURE_FLAG_BEGIN) {
        // Begin signals the start of a gesture. For the Hold gesture, this means 
        the user has been holding long enough in place that the gesture 
        will become a complete press & hold if the finger is lifted. 
    } if (evt.detail & evt.MSGESTURE_FLAG_END) { 
        // End signals the end of the gesture. } 
    if (evt.detail & evt.MSGESTURE_FLAG_CANCEL) { 
        // Cancel signals the user started the gesture but cancelled it. For hold, 
        this occurs when the user drags away before lifting. This flag is 
        sent together with the End flag, signaling the gesture recognition 
        is complete. 
} 
}

动态手势（捏，旋转，滑动和拖动）

动态手势（例如捏或旋转）以类似于CSS 2D变换的变换形式报告。 动态手势会触发三个事件： MSGestureStart ， MSGestureChange （随着手势继续反复触发）和MSGestureEnd 。 每个事件包含的信息有关规模（捏），旋转，平移和速度。

由于动态手势报告可以进行变换，因此可以轻松地将MSGesture与CSS 2D变换一起使用来操纵诸如照片或拼图之类的元素。 例如，可以启用元素的缩放，旋转和拖动，如下所示： 

targetElement.addEventListener("MSGestureChange", manipulateElement); 
function manipulateElement(e) { 
    // Uncomment the following code if you want to disable the built-in inertia 
            provided by dynamic gesture recognition 
    // if (e.detail == e.MSGESTURE_FLAG_INERTIA) 
    // return;   
    var m = new MSCSSMatrix(e.target.style.transform); // Get the latest CSS transform on the element 
    e.target.style.transform = m 
        .translate(e.offsetX, e.offsetY) // Move the transform origin under the center of the gesture 
        .rotate(e.rotation * 180 / Math.PI) // Apply Rotation 
        .scale(e.scale) // Apply Scale 
        .translate(e.translationX, e.translationY) // Apply Translation 
        .translate(-e.offsetX, -e.offsetY); // Move the transform origin back 
}

通过分别使用CTRL或SHIFT修改键旋转鼠标滚轮，可以支持鼠标的缩放和旋转等动态手势。

您可以通过深入了解MSGesture对象和MSGesture事件的文档来了解更多信息。

本文已获许可重新发布 。

翻译自: https://www.sitepoint.com/touch-browsing-beyond-pan-zoom-and-tap/

iosview的缩放和平移