我在Javascript中编写了一个函数来使图像在容器中可拖动。即使图像被放大,也可以在整个屏幕上拖动而不会从图像中消失。我的功能依赖于使用style.top和style.left。现在我听说使用translate3d可能会提供更好的性能。这很有趣,因为我将使用滑块的图像缩放功能更改为scale3d,缩放显然更加平滑。那么任何人都可以帮我转换我写的使用translate3d的这个函数吗?我尝试过并尝试过,但一直在失败。非常感谢:convert function to use css translate3d
编辑:我提出了一个的jsfiddle https://jsfiddle.net/bx4073tr/
请注意,imgRect是父DIV而IMG是图像本身(这是在包含在div img标签)。
function makeImageDraggable(event) {
// Make an image draggable but within bounds of container
let overflow_vertical = false;
let overflow_horizontal = false;
// bounding rectangles to hold image and imageContainer
let imgRect = img.getBoundingClientRect();
let imgContainerRect = imageContainer.getBoundingClientRect();
// find out if image overflows it's container div
// check for vertical overflow, getBoundingClientRect().height will get the real height after the image is scaled
if (imgRect.height > imageContainer.offsetHeight) {
overflow_vertical = true;
}
// check for horizontal overflow
if (imgRect.width > imageContainer.offsetWidth) {
overflow_horizontal = true;
}
// if there is no overflow, either horizontal or vertical, then do absolutely nothing
if (!overflow_horizontal && !overflow_vertical) {
// nothing to do
} else {
// otherwise make image draggable
event = event || window.event;
// get initial mouse position
let startX = event.clientX;
let startY = event.clientY;
// get position of image to be dragged
let offsetX = pixelToFloat(img.style.left);
let offsetY = pixelToFloat(img.style.top);
// add onmousemove event now we are sure user has initiated a mousedown event
window.onmousemove = function(mousemove_event) {
if (mousemove_event == null) {
mousemove_event = window.event;
}
// calculate bounds so that image does not go off the page
// if there is an overflow, the image will be bigger than the container
// so we need to find the maximum distance we can go upwards, downwards and sideways
// using img.getBoundingClientRect, we can get the width of the scaled image, we also get the width of the container
// divide it by 2 so we can move the same number of pixels in either direction
// max right and left
let max_right = -1 * (((imgRect.right - imgRect.left) - (imgContainerRect.right - imgContainerRect.left))/2);
// should be a positive number
let max_left = -1 * (max_right);
// max bottom and top
let max_bottom = -1 * (((imgRect.bottom - imgRect.top) - (imgContainerRect.bottom - imgContainerRect.top))/2);
// should be a positive number
let max_top = -1 * (max_bottom);
// Dragging image left and right
if (!overflow_horizontal) {
} else {
let scrollX = (offsetX + mousemove_event.clientX - startX);
// img.style.left will keep increasing or decreasing, check if it approaches max_left or max_right
if (scrollX >= max_left || scrollX <= max_right) {
//return false;imageContainer.style.webkitTransform = 'translate3d(' + newX + 'px,' + newY + 'px, 0)';
} else {
if (scrollX < max_left) { img.style.left = min(scrollX, max_left) + 'px'; }
if (scrollX > max_right) { img.style.left = max(scrollX, max_right) + 'px'; }
}
}
// Dragging image top to bottom
if (!overflow_vertical) {
} else {
let scrollY = (offsetY + mousemove_event.clientY - startY);
// as an expanded image is pulled downwards, img.style.top keeps increasing to approach max_top
// if it reaches max top, simply do nothing, else keep increasing
// check for both conditions, approaching max_top and approaching max_bottom
if (scrollY >= max_top || scrollY <= max_bottom) {
// return false;
} else {
if (scrollY < max_top) { img.style.top = min(scrollY, max_top) + 'px'; }
if (scrollY > max_bottom) { img.style.top = max(scrollY, max_bottom) + 'px'; }
}
}
// return
return false;
}
}
// cancel mousemove event on mouseup
window.onmouseup = function(mouseup_event) {
window.onmousemove = null;
// Should not return false as it will interfere with range slider
}
// return false
return false;
}
我试图与img.style.transform替换img.style.top和img.style.left的所有实例= 'translate3d(scrollXpx,scrollYpx,0)规模(currentScale)' 和图像跳过所有的地方 – daibatzu