我想尝试对一张图片进行缩放,并确保其从一个起始点正确移动(基本上是捏合缩放)。我正在尝试找到一个解决方案,不涉及更改transform-origin
属性,因为这将使查找图像的左/上边缘变得复杂,而我正在为此问题使用它们。
这更像是一个数学问题。 我遇到了麻烦,无法想出一个方程来确定根据原点需要平移多少图像。 我目前想出的等式不能正确地从一个点缩放。 关于演示,当用鼠标滚动时,图像应该从鼠标指针处放大。
我不想寻找变通方法或替代设计。如前所述,我不能修改transform-origin
属性。
演示:https://jsfiddle.net/dook/ort0efjd/
矩阵变换函数
function transform() {
var matrix = [dim.new_scale, 0, 0, dim.new_scale, dim.new_x, dim.new_y].join(",");
image_center.css({
"transform": "matrix(" + matrix + ") translate3d(0, 0, 0)",
"-webkit-transform": "matrix(" + matrix + ") translate3d(0, 0, 0)",
"-moz-transform": "matrix(" + matrix + ") translate3d(0, 0, 0)",
});
}
鼠标滚轮事件
// Determine mousewheel pointer in relation to picture origin
var offset = image_center.offset();
var originX = ev.originalEvent.pageX - offset.left;
var originY = ev.originalEvent.pageY - offset.top;
// truncated --- new_scale is modified
// Translate based on pointer origin -- This is where I need help
dim.new_x = originX + dim.height * (dim.new_scale - 1);
dim.new_y = originY + dim.height * (dim.new_scale - 1);
// truncated -- Keep image within constraints
transform(); // Applies everything in dim to CSS transform matrix