以挪动一个SVG图形为例，残缺代码如下：
<!doctype html>
<html>
<head>
<style>
body {
margin: 0;
}
/* 最外层容器 */
#content {
/* 阻止页面大小随着SVG挪动而变动 */
overflow: hidden;
}
/* 固定Header */
#header {
left: 0;
right: 0;
position: fixed;
height: 50px!important;
background-color: rgb(124, 252, 45);
z-index: 10;
}
/* 包容须要追随手势挪动的SVG的容器 */
#panel_container {
height: 100vh;
z-index: 5;
background-color: rgb(248, 213, 98);
}
/* 固定Footer */
#footer {
left: 0;
right: 0;
bottom: 0;
position: fixed;
height: 50px!important;
background-color: rgb(124, 252, 45);
z-index: 10;
}
/* 须要追随手势挪动的SVG */
svg {
background-color: rgb(250, 250, 153);
width: 100%;
height: 100%;
}
</style>
<script>
// 须要追随手势挪动的SVG。页面加载后赋值
var svg = null;
// 用户操作后冀望的SVG缩放比例
var scale = 1;
// 用户操作后冀望的SVG中心点的横向偏移
var posX = 0;
// 用户操作后冀望的SVG中心点的纵向偏移
var posY = 0;
// 咱们不心愿SVG比例过小或偏出屏幕，所以在SVG被挪动或缩放到合乎用户冀望的比例和地位后，还须要让SVG回弹到以下合乎咱们冀望的比例和地位
// 通过修改后的SVG缩放比例
var finalScale = 1;
// 通过修改后的SVG中心点的横向偏移
var finalPosX = 0;
// 通过修改后的SVG中心点的纵向偏移
var finalPosY = 0;
// 上次依据用户操作进行渲染的工夫戳。每次执行render()时被设置。用户的操作优先于零碎的回弹修改，所以只有以后工夫间隔该工夫戳曾经过来了一段时间(200毫秒)后，咱们才能够开始对SVG进行回弹修改。详见bounce()
var lastRenderingTime;
// 监听页面加载实现事件。为SVG加点元素以便地位参考
window.addEventListener("load", function() {
svg = document.querySelector("svg");
// 简略加一个小方块
let newRect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
newRect.setAttribute("x", "150");
newRect.setAttribute("y", "150");
newRect.setAttribute("width", "100");
newRect.setAttribute("height", "100");
newRect.setAttribute("fill", "#5cceee");
svg.appendChild(newRect);
});
// 依据用户的操作进行渲染
var render = () => {
// 更新渲染的工夫戳
lastRenderingTime = new Date().getTime();
window.requestAnimationFrame(() => {
// 依据新的地位和缩放比例渲染SVG
svg.style.transform = `translate3D(${posX}px, ${posY}px, 0px) scale(${scale})`;
// 如果不想要回弹成果，以下代码能够去掉
// 让零碎稍后尝试回弹修改(有必要的话)
setTimeout(bounce, 500);
});
};
// 如果不想要回弹成果，以下bounce()代码能够去掉
// 依据修改值回弹修改SVG
var bounce = () => {
// 用户操作后的缩放和地位没有问题，用户冀望与零碎冀望雷同，间接返回
if (scale == finalScale && posX == finalPosX && posY == finalPosY) return;
// 用户可能还在操作中，按优先级规定不进行零碎操作，而是期待片刻再尝试
if (new Date().getTime() - lastRenderingTime < 200) {
// 期待500毫秒
setTimeout(bounce, 500);
// 返回
return;
}
// 包容SVG的容器。联合SVG和包容SVG的容器的绝对地位和大小来计算回弹量
var ref = document.getElementById("panel_container").getBoundingClientRect();
// SVG以后的缩放比例
var lastScale = svg.getBoundingClientRect().width / ref.width;
// SVG以后的中心点横向偏移
var lastPosX = svg.getBoundingClientRect().x + svg.getBoundingClientRect().width / 2 - ref.width / 2;
// SVG以后的中心点纵向偏移
var lastPosY = svg.getBoundingClientRect().y + svg.getBoundingClientRect().height / 2 - ref.height / 2;
// 该次回弹的指标比例。与最终修改值差距过小则间接置为最终修改值
var stepScale = Math.abs(finalScale - lastScale) > 0.1 ? (lastScale + Math.sign(finalScale - lastScale) * 0.1) : finalScale;
// 该次回弹的指标中心点横向偏移。与最终修改值差距过小则间接置为最终修改值
var stepPosX = Math.abs(finalPosX - lastPosX) > 10 ? (lastPosX + (finalPosX - lastPosX) / 10 + Math.sign(finalPosX - lastPosX) * 10) : finalPosX;
// 该次回弹的指标中心点纵向偏移。与最终修改值差距过小则间接置为最终修改值
var stepPosY = Math.abs(finalPosY - lastPosY) > 10 ? (lastPosY + (finalPosY - lastPosY) / 10 + Math.sign(finalPosY - lastPosY) * 10) : finalPosY;
window.requestAnimationFrame(() => {
// 依据指标地位和缩放比例渲染SVG
svg.style.transform = `translate3D(${stepPosX}px, ${stepPosY}px, 0px) scale(${stepScale})`;
});
// 如果曾经修改实现则返回
if (stepScale == finalScale && stepPosX == finalPosX && stepPosY == finalPosY) return;
// 持续尝试进行下一次修改
setTimeout(bounce, 500);
};
// 监听触控板手势事件。理论为鼠标滚轮事件
window.addEventListener('wheel', (e) => {
// 包容SVG的容器。联合SVG和包容SVG的容器的绝对地位和大小来计算修改值
var ref = document.getElementById("panel_container").getBoundingClientRect();
// SVG以后的缩放比例
var lastScale = svg.getBoundingClientRect().width / ref.width;
// SVG以后的中心点横向偏移
var lastPosX = svg.getBoundingClientRect().x + svg.getBoundingClientRect().width / 2 - ref.width / 2;
// SVG以后的中心点纵向偏移
var lastPosY = svg.getBoundingClientRect().y + svg.getBoundingClientRect().height / 2 - ref.height / 2;
if (e.ctrlKey) {
// 缩放事件
// 依据操作确定缩放值。地位不变
finalScale = scale = lastScale - e.deltaY * 0.01;
finalPosX = posX = lastPosX;
finalPosY = posY = lastPosY;
} else {
// 挪动事件
// 依据操作确定地位。缩放值不变
finalScale = scale = lastScale;
finalPosX = posX = lastPosX - e.deltaX * 2;
finalPosY = posY = lastPosY - e.deltaY * 2;
}
// 如果不想要回弹成果，以下对finalXXX的赋值能够间接批改为对XXX的赋值
// 不容许SVG过小(缩放值小于1)
if (scale < 1) finalScale = 1;
// 不容许SVG右边界进入屏幕内
var minPosX = ref.width / 2 - ref.width * finalScale / 2;
// 不容许SVG左边界进入屏幕内
var maxPosX = ref.width * finalScale / 2 - ref.width / 2;
// 不容许SVG下边界进入屏幕内
var minPosY = ref.height / 2 - ref.height * finalScale / 2;
// 不容许SVG上边界进入屏幕内
var maxPosY = ref.height * finalScale / 2 - ref.height / 2;
// 依据以上限度值确定零碎最终修改值
if (posX < minPosX) finalPosX = minPosX;
if (posX > maxPosX) finalPosX = maxPosX;
if (posY < minPosY) finalPosY = minPosY;
if (posY > maxPosY) finalPosY = maxPosY;
// 依据用户操作进行渲染
render();
});
</script>
</head>
<body>
<!-- 最外层容器 -->
<div id='content'>
<!-- 搁置一个固定Header为肉眼察看位移作参考 -->
<div id='header'>
Header
</div>
<!-- 包容须要追随手势挪动的SVG的容器 -->
<div id='panel_container'>
<!-- 须要追随手势挪动的SVG -->
<svg></svg>
</div>
<!-- 搁置一个固定Footer为肉眼察看位移作参考 -->
<div id='footer'>
Footer
</div>
</div>
</body>
</html>
发表回复