使用css缩放变换和滚动条平移-定位问题

Using css scale transformation and panning scrollers - Positioning issue

本文关键字：定位 问题 滚动条 css 缩放 变换 使用      更新时间：2023-09-26

因此，我正在为web图像工具创建缩放和平移区域，并且我已经设法工作缩放功能，并且平移功能也有效。我遇到了两个问题;-首先，当我平移时，平移位置重置。其次，滚动功能不允许我访问工作区的左侧和顶部区域。这里有一个相互依存的链接，可以让你了解问题所在:

链接到Codepen

代码片段:

缩放代码:

function zoomIn() {
    $('#ui_container').css("zoom", "2");
}
function zoomOut() {
    $('#ui_container').css("zoom", "1");
}

平移代码:

var curXPos = 0;
var curYPos = 0;
var curDown = false;
window.addEventListener("mousedown", function(e) {
    curDown = true;
    curXPos = e.pageX;
    curYPos = e.pageY;
});
window.addEventListener("mouseup", function(e) {
    curDown = false;
});
window.addEventListener("mousemove", function(e) {
    if (curDown === true) {
        $('#ui').scrollLeft((document.body.scrollLeft + (curXPos - e.pageX)));
        $('#ui').scrollTop((document.body.scrollTop + (curYPos - e.pageY)));
    }
});

我的代码也可以在codependency上找到。我已经尝试修复这个问题几个小时了，但是没有发现任何结果。我能做些什么来解决这个问题?

提前谢谢你，Ryan。

看看我的解决方案

function zoomIn() {
		$('#ui_container').css("zoom", "2");
}
function zoomOut() {
		$('#ui_container').css("zoom", "1");
}
		var cX = 0;
		var cY = 0;
var dX=0;
var dY=0;
{ // Panning
		var cD = false;
		$("#ui_container").on("mousedown", function(e) {
				cD = true;
				cX = e.screenX;
				cY = e.screenY;
		});
		$("#ui_container").on("mouseup", function(e) {
				cD = false;
			cX=0;
			cY=0;
		});
		$("#ui_container").on("mousemove", function(e) {
				if (cD === true) {
					
					dX+=document.body.scrollLeft + (cX - e.screenX);
					dY+=document.body.scrollTop + (cY - e.screenY);
									cX = e.screenX;
									cY = e.screenY;
						$('#ui').scrollLeft(dX);
						$('#ui').scrollTop(dY);
				}
		});
}
#ui {
		position: fixed;
		width: 300px;
		height: 300px;
		border: 1px solid rgba(0, 0, 0, 0.15);
		left: 0px;
		top: 0px;
		margin-left: 50px;
		margin-top: 10px;
		overflow: auto;
}
#ui_container {
		position: absolute;
		width: 400px;
		height: 300px;
		left: 50%;
		top: 50%;
		margin-left: -200px;
		margin-top: -150px;
		background-color: #f0f;
		zoom: 1;
	background-image: url("http://www.clker.com/cliparts/x/u/9/2/j/G/transparent-square-hi.png");
	background-size: 10px 10px;
}
#ui_container_padding {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	padding: 20px;
	margin-left: -20px;
	margin-top: -20px;
}
#zoomIn {
		position: absolute;
		width: 30px;
		height: 30px;
		left: 0px;
		top: 0px;
		margin-left: 10px;
		margin-top: 10px;
		border-radius: 100%;
		text-align: center;
		line-height: 30px;
		background-color: #313131;
		color: #ffffff;
		cursor: pointer;
}
#zoomOut {
		position: absolute;
		width: 30px;
		height: 30px;
		left: 0px;
		top: 0px;
		margin-left: 10px;
		margin-top: 50px;
		border-radius: 100%;
		text-align: center;
		line-height: 26px;
		background-color: #313131;
		color: #ffffff;
		cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ui">
		<div id="ui_container">
			
			<span id="ui_container_padding"></span>
	
	</div>
</div>
<span id="zoomIn" onclick="zoomIn()">+</span>
<span id="zoomOut" onclick="zoomOut()">-</span>

相关文章：