level 1
浮舒的鱼
楼主
请大佬看看双指缩放如何不超出指定边界，双指缩放搞了好久了，现在的问题就是放大之后判断如果大于边界就不执行放大操作，但是我的缩小操作就不能实现了，判断缩小的话就一直闪，而且我拖动的时候位置永远从左上角开始，元素的位置都偏移出去了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../css/jquery-ui.min.css">
<link rel="stylesheet" href="../css/bootstrap.css">
<link rel="stylesheet" href="../css/bootstrap.min.css">
<style>
body{margin:40px;}
#sd{
width: 60%;height: 60%; position: absolute;background: #2b542c;
}
#sdh{
width:50%;
height:50%;
background: #f94a34;
}
#image{
width:100%;
height:100%;
}
#fgh{
position: absolute;
top: 70%;
}
#ttt{
position: absolute;
top: 80%;
}
</style>
</head>
<body id="body">
<div id="sd">
<canvas id="sdh"><img id="image" src="../image/p1.png"></canvas>
</div>
<div id="fgh">
<div id="fgh-div1"></div>
<div id="fgh-div2"></div>
</div>
<div id="ttt">
<div id="ttt-div1"></div>
<div id="ttt-div2"></div>
</div>
<script src="../js/jquery-2.1.1.min.js"></script>
<script src="../js/jquery-ui.min.js"></script>
<script src="../js/jquery.ui.touch-punch.js"></script>
<script src="../js/jquery.ui.touch-punch.min.js"></script>
<script src="../js/touch.js"></script>
<script>
$(function () {
$("#sdh").draggable({
containment: '#sd',
})
});
var eleImg = document.querySelector('#sdh');
var store = {
scale: 1
};
// 缩放事件的处理
eleImg.addEventListener('touchstart', function (event) {
var touches = event.touches;
var events = touches[0];
var events2 = touches[1];
event.preventDefault();
// 第一个触摸点的坐标
store.pageX = events.pageX;
store.pageY = events.pageY;
store.moveable = true;
if (events2) {
store.pageX2 = events2.pageX;
store.pageY2 = events2.pageY;
}
store.originScale = store.scale || 1;
});
document.addEventListener('touchmove', function (event) {
if (!store.moveable) {
return;
}
event.preventDefault();
var touches = event.touches;
var events = touches[0];
var events2 = touches[1];
// 双指移动
if (events2) {
// 第2个指头坐标在touchmove时候获取
if (!store.pageX2) {
store.pageX2 = events2.pageX;
}
if (!store.pageY2) {
store.pageY2 = events2.pageY;
}
// 获取坐标之间的举例
var getDistance = function (start, stop) {
return Math.hypot(stop.x - start.x, stop.y - start.y);
};
// 双指缩放比例计算
var zoom = getDistance({
x: events.pageX,
y: events.pageY
}, {
x: events2.pageX,
y: events2.pageY
}) /
getDistance({
x: store.pageX,
y: store.pageY
}, {
x: store.pageX2,
y: store.pageY2
});
var a_x = $("#body").offset().left;
var a_y = $("#body").offset().top;
var xx = $("#sd").offset().left;
var yy = $("#sd").offset().top;
var ww = $("#sd").outerWidth() + 1;
var hh = $("#sd").outerHeight() + 1;
var ww2 = $(eleImg).width();
var hh2 = $(eleImg).height();
var xx2 = $(eleImg).offset().left;
var yy2 = $(eleImg).offset().top;
//元素获取左（上下），右(上下)角的位置
var upper_right_X = (xx2 - xx) + ww2;//右上角X
var lower_left_Y = (yy2 - yy) + hh2;//左下角Y
var upper_left_X = (xx2 - xx);//左上角X
var upper_left_Y = (yy2 - yy);//左上角Y
if (upper_left_X < 0) {
upper_left_X = 0;
}
if (upper_left_Y < 0) {
upper_left_Y = 0;
}
//获取边界窗口的左（上下），右(上下)角的位置
var upper_right_X2 = (xx - a_x) + ww;//右上角X
var lower_left_Y2 = (yy - a_y) + hh;//左下角Y
var upper_left_X2 = (xx - a_x);//左上角X
var upper_left_Y2 = (yy - a_y);//左上角Y
if (upper_left_X2 < 0) {
upper_left_X2 = 0;
}
if (upper_left_Y2 < 0) {
upper_left_Y2 = 0;
// 应用在元素上的缩放比例
var newScale = store.originScale * zoom
if (upper_right_X < upper_right_X2 && lower_left_Y < lower_left_Y2 && (parseInt(upper_left_X)) > upper_left_X2 && (parseInt(upper_left_Y)) > upper_left_Y2) {
// 最大缩放比例限制
if (newScale > 2) {
newScale = 2;
}
// 记住使用的缩放值
store.scale = newScale;
// 图像应用缩放效果
eleImg.style.transform = 'scale(' + newScale + ')';
}
if (upper_left_X2 == upper_left_X && upper_left_Y2 == upper_left_Y && (upper_right_X2-upper_left_X2) == (upper_right_X2-upper_left_X) && (lower_left_Y2-upper_left_Y2) == (lower_left_Y2-upper_left_Y)) {
// 最大缩放比例限制
if (newScale < 3) {
newScale1 = 1;
}
// 记住使用的缩放值
store.scale = newScale1;
// 图像应用缩放效果
eleImg.style.transform = 'scale(' + newScale1 + ')';
}
}
})
document.addEventListener('touchend', function () {//手指离开屏幕后触发
store.moveable = false;
delete store.pageX2;
delete store.pageY2;
});
document.addEventListener('touchcancel', function () {//执行都不进来
store.moveable = false;
delete store.pageX2;
delete store.pageY2;
});
</script>
<script>
//禁止整个页面所有的右击事件
document.oncontextmenu = function () {
return false;
};
$("#ent4").on('touchstart', function (e) {
e.preventDefault();
}, false);
//判断是否Safari浏览器，禁止缩放大小
var userAgent = navigator.userAgent;
if (userAgent.indexOf("Safari") > -1) {
// 禁止苹果手机或ipad在放大缩小
window.onload = function () {
document.addEventListener('touchstart', function (event) {
if (event.touches.length > 1) {
event.preventDefault(); //阻止元素的默认行为
}
})
var lastTouchEnd = 0;
document.addEventListener('touchend', function (event) {
var now = (new Date()).getTime();
if (now - lastTouchEnd <= 300) {
event.preventDefault();
}
lastTouchEnd = now; //当前为最后一次触摸
}, false)
}
}
// 阻止ios页面双指放大
document.addEventListener('gesturestart', function (event) {
event.preventDefault();
});
//固定页面禁止滑动（好像只对ipad有效，手机还是靠meta完成）
var jinzhi = 0;
document.addEventListener("touchmove", function (e) {
if (jinzhi == 0) {
e.stopPropagation();
}
jinzhi = 1;
}, false);
</script>
</body>
</html>
2020年09月03日 07点09分
1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../css/jquery-ui.min.css">
<link rel="stylesheet" href="../css/bootstrap.css">
<link rel="stylesheet" href="../css/bootstrap.min.css">
<style>
body{margin:40px;}
#sd{
width: 60%;height: 60%; position: absolute;background: #2b542c;
}
#sdh{
width:50%;
height:50%;
background: #f94a34;
}
#image{
width:100%;
height:100%;
}
#fgh{
position: absolute;
top: 70%;
}
#ttt{
position: absolute;
top: 80%;
}
</style>
</head>
<body id="body">
<div id="sd">
<canvas id="sdh"><img id="image" src="../image/p1.png"></canvas>
</div>
<div id="fgh">
<div id="fgh-div1"></div>
<div id="fgh-div2"></div>
</div>
<div id="ttt">
<div id="ttt-div1"></div>
<div id="ttt-div2"></div>
</div>
<script src="../js/jquery-2.1.1.min.js"></script>
<script src="../js/jquery-ui.min.js"></script>
<script src="../js/jquery.ui.touch-punch.js"></script>
<script src="../js/jquery.ui.touch-punch.min.js"></script>
<script src="../js/touch.js"></script>
<script>
$(function () {
$("#sdh").draggable({
containment: '#sd',
})
});
var eleImg = document.querySelector('#sdh');
var store = {
scale: 1
};
// 缩放事件的处理
eleImg.addEventListener('touchstart', function (event) {
var touches = event.touches;
var events = touches[0];
var events2 = touches[1];
event.preventDefault();
// 第一个触摸点的坐标
store.pageX = events.pageX;
store.pageY = events.pageY;
store.moveable = true;
if (events2) {
store.pageX2 = events2.pageX;
store.pageY2 = events2.pageY;
}
store.originScale = store.scale || 1;
});
document.addEventListener('touchmove', function (event) {
if (!store.moveable) {
return;
}
event.preventDefault();
var touches = event.touches;
var events = touches[0];
var events2 = touches[1];
// 双指移动
if (events2) {
// 第2个指头坐标在touchmove时候获取
if (!store.pageX2) {
store.pageX2 = events2.pageX;
}
if (!store.pageY2) {
store.pageY2 = events2.pageY;
}
// 获取坐标之间的举例
var getDistance = function (start, stop) {
return Math.hypot(stop.x - start.x, stop.y - start.y);
};
// 双指缩放比例计算
var zoom = getDistance({
x: events.pageX,
y: events.pageY
}, {
x: events2.pageX,
y: events2.pageY
}) /
getDistance({
x: store.pageX,
y: store.pageY
}, {
x: store.pageX2,
y: store.pageY2
});
var a_x = $("#body").offset().left;
var a_y = $("#body").offset().top;
var xx = $("#sd").offset().left;
var yy = $("#sd").offset().top;
var ww = $("#sd").outerWidth() + 1;
var hh = $("#sd").outerHeight() + 1;
var ww2 = $(eleImg).width();
var hh2 = $(eleImg).height();
var xx2 = $(eleImg).offset().left;
var yy2 = $(eleImg).offset().top;
//元素获取左（上下），右(上下)角的位置
var upper_right_X = (xx2 - xx) + ww2;//右上角X
var lower_left_Y = (yy2 - yy) + hh2;//左下角Y
var upper_left_X = (xx2 - xx);//左上角X
var upper_left_Y = (yy2 - yy);//左上角Y
if (upper_left_X < 0) {
upper_left_X = 0;
}
if (upper_left_Y < 0) {
upper_left_Y = 0;
}
//获取边界窗口的左（上下），右(上下)角的位置
var upper_right_X2 = (xx - a_x) + ww;//右上角X
var lower_left_Y2 = (yy - a_y) + hh;//左下角Y
var upper_left_X2 = (xx - a_x);//左上角X
var upper_left_Y2 = (yy - a_y);//左上角Y
if (upper_left_X2 < 0) {
upper_left_X2 = 0;
}
if (upper_left_Y2 < 0) {
upper_left_Y2 = 0;
// 应用在元素上的缩放比例
var newScale = store.originScale * zoom
if (upper_right_X < upper_right_X2 && lower_left_Y < lower_left_Y2 && (parseInt(upper_left_X)) > upper_left_X2 && (parseInt(upper_left_Y)) > upper_left_Y2) {
// 最大缩放比例限制
if (newScale > 2) {
newScale = 2;
}
// 记住使用的缩放值
store.scale = newScale;
// 图像应用缩放效果
eleImg.style.transform = 'scale(' + newScale + ')';
}
if (upper_left_X2 == upper_left_X && upper_left_Y2 == upper_left_Y && (upper_right_X2-upper_left_X2) == (upper_right_X2-upper_left_X) && (lower_left_Y2-upper_left_Y2) == (lower_left_Y2-upper_left_Y)) {
// 最大缩放比例限制
if (newScale < 3) {
newScale1 = 1;
}
// 记住使用的缩放值
store.scale = newScale1;
// 图像应用缩放效果
eleImg.style.transform = 'scale(' + newScale1 + ')';
}
}
})
document.addEventListener('touchend', function () {//手指离开屏幕后触发
store.moveable = false;
delete store.pageX2;
delete store.pageY2;
});
document.addEventListener('touchcancel', function () {//执行都不进来
store.moveable = false;
delete store.pageX2;
delete store.pageY2;
});
</script>
<script>
//禁止整个页面所有的右击事件
document.oncontextmenu = function () {
return false;
};
$("#ent4").on('touchstart', function (e) {
e.preventDefault();
}, false);
//判断是否Safari浏览器，禁止缩放大小
var userAgent = navigator.userAgent;
if (userAgent.indexOf("Safari") > -1) {
// 禁止苹果手机或ipad在放大缩小
window.onload = function () {
document.addEventListener('touchstart', function (event) {
if (event.touches.length > 1) {
event.preventDefault(); //阻止元素的默认行为
}
})
var lastTouchEnd = 0;
document.addEventListener('touchend', function (event) {
var now = (new Date()).getTime();
if (now - lastTouchEnd <= 300) {
event.preventDefault();
}
lastTouchEnd = now; //当前为最后一次触摸
}, false)
}
}
// 阻止ios页面双指放大
document.addEventListener('gesturestart', function (event) {
event.preventDefault();
});
//固定页面禁止滑动（好像只对ipad有效，手机还是靠meta完成）
var jinzhi = 0;
document.addEventListener("touchmove", function (e) {
if (jinzhi == 0) {
e.stopPropagation();
}
jinzhi = 1;
}, false);
</script>
</body>
</html>