|
本帖最后由 邹胖胖 于 2018-6-1 18:33 编辑
- /** 打开 **/
- Model.prototype.openPinch = function(){
- var id = this.getIDByXID("mathDivXid");/** 要操作的元素 **/
-
- var reqAnimationFrame = (function () {
- return window[Hammer.prefixed(window, 'requestAnimationFrame')] || function (callback) {
- window.setTimeout(callback, 1000 / 60);
- };
- })();
-
- var el = document.querySelector("#" + id);
-
- var START_X = Math.round((window.innerWidth - el.offsetWidth) / 2);
- var START_Y = Math.round((window.innerHeight - el.offsetHeight) / 2);
-
- var ticking = false;
- var transform; //图像效果
- var timer;
- var initAngle = 0; //旋转角度
- var initScale = 1; //放大倍数
- var currentScale;
-
- this.mc = new Hammer.Manager(el); //用管理器 可以同时触发旋转 拖拽 移动
- //var mc = new Hammer(el); //旋转和移动互斥
- var mc = this.mc;
- /**
- ev.srcEvent.type touchstart touchend touchmove
- ev.deltaX 手势移动位移变量
- */
- mc.add(new Hammer.Pan({ threshold: 0, pointers: 0 }));
- mc.add(new Hammer.Rotate({ threshold: 0 })).recognizeWith(mc.get('pan'));
- mc.add(new Hammer.Pinch({ threshold: 0 })).recognizeWith([mc.get('pan'), mc.get('rotate')]);
- //结束时做一些处理
- mc.on("hammer.input", function(ev) {
- if(ev.isFinal) {
- console.log(START_X + " " + transform.translate.x + " " + ev.deltaX + " " + ev.deltaY);
- START_X = transform.translate.x ;
- START_Y = transform.translate.y ;
- }
-
- });
-
- mc.on("panstart panmove", onPan);
- //mc.on("rotatestart rotatemove rotateend", onRotate);//旋转
- mc.on("pinchstart pinchmove", onPinch);
-
- /**
- 第二次进入拖拽时 delta位移重置
- 移动时 初始位置startxy不动。delta增加
- */
- function onPan(ev){
- if(!ev.isFinal) {
- el.className = '';
- console.log(START_X + " " + START_Y + " | " + ev.deltaX + " " + ev.deltaY);
- transform.translate = {
- x: START_X + ev.deltaX,
- y: START_Y + ev.deltaY
- };
- requestElementUpdate();
- }
- }
-
- function onPinch(ev){
- if(ev.type == 'pinchstart') {
- initScale = transform.scale || 1;
- }
- el.className = '';
- transform.scale = initScale * ev.scale;
-
- /** 设置最大倍数为2,最小倍数为1 **/
- currentScale = ev.scale - 1;
- currentScale = initScale + currentScale;
- currentScale = currentScale > 4 ? 4 : currentScale;
- currentScale = currentScale < 1 ? 1 : currentScale;
- currentScale = currentScale < 1 ? 1 : currentScale;
- transform.scale = currentScale;
-
- requestElementUpdate();
- }
-
- /** 旋转相关 **/
- var preAngle = 0 ;
- var tempAngleFlag =0;
- var deltaAngle = 0;
- var startRotateAngle = 0;
-
- function onRotate(ev) {
- //点下第二个触控点时触发
- if(ev.type == 'rotatestart') {
- startRotateAngle = ev.rotation ;
- tempAngleFlag = 0 ;
- }
- if(ev.type == 'rotatemove'){
- if(tempAngleFlag == 0){
- preAngle = startRotateAngle;
- tempAngleFlag ++;
- }else{
- deltaAngle = ev.rotation - preAngle;
- el.className = '';
- transform.rz = 1; //非0 垂直xy轴
- transform.angle = initAngle + deltaAngle;
- requestElementUpdate();
- }
- }
-
- //旋转结束 记录当前图片角度
- if(ev.type =='rotateend'){
- initAngle = transform.angle;
- }
- }
-
- function updateElementTransform() {
- var value = [
- 'translate3d(' + transform.translate.x + 'px, ' + transform.translate.y + 'px, 0)',
- 'scale(' + transform.scale + ', ' + transform.scale + ')',
- 'rotate3d('+ transform.rx +','+ transform.ry +','+ transform.rz +',' + transform.angle + 'deg)'
- ];
-
- value = value.join(" ");
- el.style.webkitTransform = value;
- el.style.mozTransform = value;
- el.style.transform = value;
- ticking = false;
- }
-
- function requestElementUpdate() {
- if(!ticking) {
- reqAnimationFrame(updateElementTransform);
- ticking = true;
- }
- }
-
- function logEvent(str) {
- }
-
- /**
- 初始化设置
- */
- function resetElement() {
- el.className = 'animate';
- transform = {
- translate: { x: START_X, y: START_Y },
- scale: 1,
- angle: 0,
- rx: 0,
- ry: 0,
- rz: 0
- };
- requestElementUpdate();
- }
-
- resetElement();
- };
-
- /** 关闭 **/
- Model.prototype.offPinch = function(){
- this.mc.destroy();
- };
复制代码 使用系统提供的touch.js,会出现缩放后退拽不稳定,会闪动的情况,所以我找到了hammer.js。这是我试验的众多版本中最稳定的一个。用起来非常流畅;
页面引入hammer.js,调用openPinch()打开对元素的缩放、拖拽、旋转;调用offPinch()方法关闭操作,所以在openPinch中每次都要重新给全局变量this.mc赋值
|
评分
-
查看全部评分
|