javascript - Css3 变换触摸输入

Question

我在 map 对象上有一个 3D 变换，但是，当我变换整个 map 时，触摸输入不会跟随，这会导致在将 map 旋转 180 度时平移不起作用，控件会反转。

有没有办法告诉 CSS 反转或旋转浏览器读取触摸输入的方式，以便即使在 map 旋转时也能正常平移。

• 我知道这不是旋转 map 的首选方式，库应该有一个函数，但在这种情况下，它没有，唯一的解决方案是旋转包含 map 的整个 div。

我想知道的是一种使用 CSS 或以某种方式覆盖 Angular 以修改 360 度变量上的触摸的方法。

map 旋转频繁，不能一成不变。

用于旋转 map 的CSS:

transform-origin: 50% 50%; transform: rotate({{deg}}deg); transition: 300ms ease-out;

背后的代码是:

$scope.degraw = Math.round(heading.magneticHeading);

var aR;
$scope.rot = $scope.rot || 0; // if rot undefined or 0, make 0, else rot
aR = $scope.rot % 360;
if ( aR < 0 ) { aR += 360; }
if ( aR < 180 && ($scope.degraw > (aR + 180)) ) { $scope.rot -= 360; }
if ( aR >= 180 && ($scope.degraw <= (aR - 180)) ) { $scope.rot += 360; }
 $scope.rot += ($scope.degraw - aR);

 if($scope.isInCompass == 1) {
   $scope.deg = $scope.rot * -1;
   $scope.northdeg = $scope.rot * -1;
 }

平移和所有移动都由 map 库控制，但是我已经能够从库中获取代码(可能根本不是代码，但至少这是我现在正在看的代码)

_touchMove: function(a) {
        a.preventDefault();
        this._updateTouch(a);
        var b = this._touches,
            c, d = a.changedTouches.length,
            f, e, g, h;
        if (!(l("android") && l("safari") && 1 === a.targetTouches.length && a.touches.length === a.targetTouches.length && a.targetTouches.length === a.changedTouches.length && 0 === a.changedTouches[0].identifier && b[a.changedTouches[0].identifier] && 1 < this._touchIds.length)) {
            for (c = 0; c < d; c++)
                if (f = a.changedTouches[c], e = b[f.identifier]) g = Math.abs(f.pageX -
                    e.startX), f = Math.abs(f.pageY - e.startY), !e.moved && (g >= this.tapRadius || f >= this.tapRadius) && (e.moved = e.absMoved = !0), h = h ? h : e.moved;
            1 === this._numTouches ? (b = a.changedTouches[0], this._swipeActive ? this._fire("onSwipeMove", this._processTouchEvent(a, b)) : h && (this._swipeActive = !0, this._fire("onSwipeStart", this._processTouchEvent(a, b)))) : 2 === this._numTouches && (c = this._nodeTouches[0], d = this._nodeTouches[1], this._pinchActive ? this._fire("onPinchMove", this._processTouchEvent(a, [c, d])) : h && (h = b[c.identifier], e = b[d.identifier],
                b = Math.abs(h.startX - e.startX), h = Math.abs(h.startY - e.startY), e = Math.abs(c.pageX - d.pageX), g = Math.abs(c.pageY - d.pageY), Math.abs(Math.sqrt(e * e + g * g) - Math.sqrt(b * b + h * h)) >= 2 * this.tapRadius && (this._pinchActive = !0, this._fire("onPinchStart", this._processTouchEvent(a, [c, d])))))
        }
    },

Answer 1

我真的不能理解那个触摸代码，但关键是你应该转换输入以跟随你的旋转:

获取旋转矩阵:

var radians = deg / 180 * Math.Pi;
var cos = Math.cos(radians), sin = Math.sin(radians);
var matrix = [cos, sin, -sin, cos]; 

获取旋转的触摸点:

   var rotatedX = matrix[0] * p.x + matrix[2] * p.y;
   var rotatedY = matrix[1] * p.x + matrix[3] * p.y;

此时，如果您不了解如何处理您的输入，您可以这样做:

var originalTouchMove = _touchMove;
_touchMove = function(a) {
  // inspect a and find where clientX and clientY are.
  // obtain rotatedX and rotatedY and overwrite them
  originalTouchMove(a) // a has been mutated with rotated coords
}