CSS3变换触摸输入答案

【问题标题】：Css3 transform touch inputCSS3变换触摸输入
【发布时间】：2017-08-18 09:53:46
【问题描述】：

我在地图对象上进行了 3D 变换，但是，当我变换整个地图时，触摸输入不跟随，并且在将地图旋转 180 度时导致平移不起作用，控件被反转。

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

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

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

地图频繁变化旋转，所以不能是静态解决方案。

用于旋转地图的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;
 }

平移和所有移动都由地图库控制，但是我已经能够从库中获取代码（可能根本不是代码，但至少这是我现在正在查看的内容）

_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])))))
        }
    },

【问题讨论】：

一小段代码永远胜过一段代码的描述。
您能否指定如何处理平移事件？
我给你留下了一个不完整的答案，我希望能把你带到某个地方。你有图书馆的链接吗？
它的 Arcgisjs 3.21 developers.arcgis.com/javascript/3

标签： javascript css angular

【解决方案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
}

【讨论】：