上一篇博客有写到这个东西:http://blog.csdn.net/yeshennet/article/details/50531007
然后就有BUG了,BUG的内容是,当使用旋转元素的父元素有使用‘overflow:scroll’这个属性时,旋转很不流畅,而且会逆行
只能去找找源码,毕竟IOS需要这个属性来支持另外一个'position:fixed'的属性,不然会导致页面错乱
然后我就找到这个函数:
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
};
};
然后问题就解决了