js对元素进行缩放、拖拽、旋转

邹胖胖 · 发表于 2018-6-1 17:57:43

本帖最后由邹胖胖于 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赋值

liangyongfei · 发表于 2018-6-13 13:22:10

压缩文件是min.js吗？？下载解压失败了，可以压缩为zip文件再上传

另外建议，提供一个完整的demo案例发来，方便大家参考！

邹胖胖 · 发表于 2018-6-13 18:34:30

本帖最后由邹胖胖于 2018-6-13 18:43 编辑

liangyongfei 发表于 2018-6-13 13:22
压缩文件是min.js吗？？下载解压失败了，可以压缩为zip文件再上传

另外建议，提供一个完整的demo案例发 ...

好的，demo见附件。
要操作的元素不限于图片，我测试过div、canvas等，都可以使用；
另外，使用这个插件要打包apk安装到手机上使用，在浏览器上貌似只能拖拽

		自动登录	找回密码
密码			注册

[分享] js对元素进行缩放、拖拽、旋转

评分