使用hammerjs、css-transform和transform origin进行手势移动答案

【问题标题】：Gesture movement with hammerjs, css-transform and transform origin使用hammerjs、css-transform和transform origin进行手势移动
【发布时间】：2014-04-29 10:18:14
【问题描述】：

我正在尝试在 SVG 环境中创建多手势导航。通过 Hammer.js 提供的示例，我已经能够通过对 CSS3 属性应用转换来成功实现拖放和捏合缩放和旋转。

转换似乎有效，但是当我进行第二次转换/旋转时，问题就出现了，并且原点似乎丢失了，并且两个动作之间存在跳跃。

这是一个带有问题实现的 jsfiddle。您可以按住 maj 按钮尝试多点触控（用于旋转/缩放）。

http://jsfiddle.net/TdCcW/

canvas = {
    posX: 0,
    posY: 0,
    lastPosX: 0,
    lastPosY: 0,
    xImage: 0,
    yImage: 0,
    xLast: 0,
    yLast: 0,
    newPosX: 0,
    newPosY: 0,
    anchorX: 0,
    anchorY: 0,
    lastAnchorX: 0,
    lastAnchorY: 0,
    bufferX: 0,
    bufferY: 0,
    scale: 1,
    lastScale: undefined,
    rotation: 0,
    last_rotation: undefined,
    dragReady: 0,
    transformOrigin: '',
    initTouch: function () {
        Hammer.plugins.showTouches();
        Hammer.plugins.fakeMultitouch();

        var hammertime = Hammer(document.getElementById('container'), {
            transform_always_block: true,
            transform_min_scale: 1,
            drag_block_horizontal: true,
            drag_block_vertical: true,
            drag_min_distance: 0
        });

        var posX = 0,
            posY = 0,
            lastPosX = 0,
            lastPosY = 0,
            bufferX = 0,
            bufferY = 0,
            scale = 1,
            last_scale,
            rotation = 1,
            last_rotation, 
            dragReady = 0;

        hammertime.on('touch drag dragend transform', function (ev) {
            elemRect = document.getElementById('viewport');
            canvas.manageMultitouch(ev);
        });
    },
    manageMultitouch: function (ev) {

        switch (ev.type) {
            case 'touch':
                canvas.last_scale = canvas.scale;
                canvas.last_rotation = canvas.rotation;
                break;

            case 'drag':
                canvas.posX = ev.gesture.deltaX + canvas.lastPosX;
                canvas.posY = ev.gesture.deltaY + canvas.lastPosY;
                break;

            case 'transform':
                canvas.rotation = canvas.last_rotation + ev.gesture.rotation;
                canvas.scale = Math.max(1, Math.min(canvas.last_scale * ev.gesture.scale, 10));

                canvas.anchorX = (ev.gesture.center.pageX - canvas.lastPosX);
                canvas.anchorY = (ev.gesture.center.pageY - canvas.lastPosY);

                canvas.transformOrigin = canvas.anchorX + " " + canvas.anchorY;

                break;

            case 'dragend':
                canvas.lastPosX = canvas.posX;
                canvas.lastPosY = canvas.posY;

                break;
        }



        var transform =
            "translate3d(" + canvas.posX + "px," + canvas.posY + "px, 0) " +
            "scale3d(" + canvas.scale + "," + canvas.scale + ", 0) " +
            "rotate(" + canvas.rotation + "deg) ";

        elemRect.style.transform = transform;
        elemRect.style.oTransform = transform;
        elemRect.style.msTransform = transform;
        elemRect.style.mozTransform = transform;
        elemRect.style.webkitTransform = transform;

        elemRect.style.webkitTransformOrigin = canvas.transformOrigin;



    }
}

$(document).ready(function () {
    canvas.initTouch();
});

【问题讨论】：

标签： javascript svg transform hammer.js css-transforms

【解决方案1】：

据我了解，您的问题是，您正在修改转换中心（transform-origin）。我了解您要实现的目标，即让新修改以捏合/旋转手势的中心为中心应用。但是，通过更改转换中心，您也会更改您之前应用的所有转换的中心，从而导致跳跃行为。

要实现你想要的，你可能需要做一些矩阵运算并使用 css 矩阵属性。理论上我猜你：

需要保留当前变换矩阵（TM）
应用新转换时
- 使用矩阵乘法将 TM 移动到手势的负变换中心
- 矩阵将 TM 与手势的比例和位置相乘
- 将 TM 移动到正转换中心
- 将新的 TM 应用于 css 矩阵属性

希望对你有帮助

本杰明

【讨论】：