baidu Touch.js 旋转不了

上一篇博客有写到这个东西:http://blog.csdn.net/yeshennet/article/details/50531007

然后就有BUG了,BUG的内容是,当使用旋转元素的父元素有使用‘overflow:scroll’这个属性时,旋转很不流畅,而且会逆行

只能去找找源码,毕竟IOS需要这个属性来支持另外一个'position:fixed'的属性,不然会导致页面错乱

touch.js源码

然后我就找到这个函数:

    rotateSingleFinger: function(ev) {
        var el = ev.target;
        if (__rotation_single_finger && utils.getFingers(ev) < 2) {
            if (!pos.move) return;
            if (__rotation_single_start.length < 2) {
                var docOff = utils.getXYByElement(el);

                __rotation_single_start = [{
                        x: docOff.left + el.offsetWidth / 2,
                        y: docOff.top + el.offsetHeight / 2
                    },
                    pos.move[0]
                ];
                __initial_angle = parseInt(utils.getAngle180(__rotation_single_start[0], __rotation_single_start[1]), 10);
            }

            var move = [__rotation_single_start[0], pos.move[0]];
            var rotation = this.getAngleDiff(move);

            var eventObj = {
                type: '',
                originEvent: ev,
                rotation: rotation,
                direction: (rotation > 0 ? 'right' : 'left'),
                fingersCount: utils.getFingers(ev)
            };
            if (utils.isTouchMove(ev)) {
                eventObj.fingerStatus = "move";
            } else if (utils.isTouchEnd(ev) || ev.type === 'mouseout') {
                eventObj.fingerStatus = "end";
                engine.trigger(el, smrEventList.PINCH_END, eventObj);
                utils.reset();
            }
            var eventType = rotation > 0 ? smrEventList.ROTATION_RIGHT : smrEventList.ROTATION_LEFT;
            engine.trigger(el, eventType, eventObj);
            engine.trigger(el, smrEventList.ROTATION, eventObj);
        }
    },
测试发现是:var move = [__rotation_single_start[0], pos.move[0]];这个地方,在原点和指尖距离不对。

读代码,查问题,用了一个晚上,第二天有web端同事过来,赶紧去请教他,然后修正了圆心的计算公式:

utils.getXYByElement = function(el) {
    var left = 0,
        top = 0,
        offset

    while (el.offsetParent) {
        left += el.offsetLeft;
        top += el.offsetTop;
        if(!(el.offsetParent.tagName.toLowerCase() === 'body')) {
        	left -= el.offsetParent.scrollLeft;
	        top -= el.offsetParent.scrollTop;
        }
        el = el.offsetParent;
    }
    return {
        left: left,
        top: top
    };
};

然后问题就解决了





  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值