Javascript 矩阵缩放/从点平移

我正在尝试缩放图像，并使其从原点正确平移（基本上是从收缩到缩放）。我试图找到一个不涉及更改

变换原点的解决方案，因为它会使查找图片的左/上边缘变得复杂，我使用它不仅仅解决这个问题

这更像是一道数学题根据原点，我很难找到一个方程式来确定图像的平移量。我计算出的当前方程式不能从一个点正确缩放。关于演示，使用鼠标滚动时，图像应该从鼠标指针放大

var image_center = $("#image");
var base_image = $(".outer");
var dim = {};

function resetDim() {
  // Initialize image.dim with values
  dim.cont_width = base_image.width(); // Container width
  dim.cont_height = base_image.height(); // Container height
  dim.width = image_center.width(); // Element width
  dim.height = image_center.height(); // Element height

  dim.left_edge = 0;
  dim.top_edge = 0; // Edge translation
  dim.init_x = 0;
  dim.new_x = 0; // Initial/new x position
  dim.init_y = 0;
  dim.new_y = 0; // Initial/new y position
  dim.init_scale = 1;
  dim.new_scale = 1; // Initial/new scale
  dim.max_scale = 3; // Max image scale
};

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)",
  });
}

$(document).ready(function() {
  resetDim();
  transform();

  $('.outer').bind('mousewheel', function(ev) {
    // onScroll start
    // Determine pointer origin in relation to picture
    var offset = image_center.offset();
    var originX = ev.originalEvent.pageX - offset.left;
    var originY = ev.originalEvent.pageY - offset.top;
    // Calculate current size of the image.
    var width = dim.width * dim.new_scale;
    var height = dim.height * dim.new_scale;
        // Calculate the relative position of the mouse independent of current scale.
    var mx = originX / width;
    var my = originY / height;

    // onScroll ev
    dim.new_scale += (ev.originalEvent.deltaY > 0) ? -0.1 : 0.1;
    if (dim.new_scale > dim.max_scale) dim.new_scale = dim.max_scale;
    else if (dim.new_scale < 1) dim.new_scale = 1;

    // Update new image position based upon new scale.
    var new_width = dim.width * dim.new_scale;
    var new_height = dim.height * dim.new_scale;
    var new_mouse_x = new_width * mx;
    var new_mouse_y = new_height * my;
    dim.new_x += originX - new_mouse_x;
    dim.new_y += originY - new_mouse_y;
    transform();
  });
});

我不是在寻找解决方法，也不是在寻找替代设计。如前所述，我无法修改“变换原点”属性

演示：

矩阵变换函数

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

我得到了部分解决方案。我想它可以做你想做的，放大和缩小鼠标指定的点。不幸的是，如果您缩放，然后将鼠标移动到另一个点，然后再次缩放，它会跳转

var image_center = $("#image");
var base_image = $(".outer");
var dim = {};
var original_offset = image_center.offset();

function resetDim() {
  // Initialize image.dim with values
  dim.cont_width = base_image.width(); // Container width
  dim.cont_height = base_image.height(); // Container height
  dim.width = image_center.width(); // Element width
  dim.height = image_center.height(); // Element height

  dim.new_x = 0; // Initial/new x position
  dim.new_y = 0; // Initial/new y position
  dim.new_scale = 1; // Initial/new scale
  dim.max_scale = 3; // Max image scale
};

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)",
  });
}

$(document).ready(function() {
  resetDim();

  $('.outer').bind('mousewheel', function(ev) {
    // onScroll start
    // Determine pointer origin in relation to picture
    var originX = ev.originalEvent.pageX - original_offset.left;
    var originY = ev.originalEvent.pageY - original_offset.top;

    // onScroll ev
    dim.new_scale += (ev.originalEvent.deltaY > 0) ? -0.1 : 0.1;
    if (dim.new_scale > dim.max_scale) dim.new_scale = dim.max_scale;
    else if (dim.new_scale < 1) dim.new_scale = 1;

    // Translate based on origin
    dim.new_x = -(originX * (dim.new_scale-1) );
    dim.new_y = -(originY * (dim.new_scale-1) );

    transform();
  });
});

var image_center=$（“#image”）；
var base_image=$（“.outer”）；
var dim={}；
var original_offset=图像_center.offset（）；
函数resetDim（）{
//使用值初始化image.dim
dim.cont_width=base_image.width（）；//容器宽度
dim.cont_height=base_image.height（）；//容器高度
dim.width=image_center.width（）；//元素宽度
dim.height=image_center.height（）；//元素高度
dim.new_x=0；//初始/新x位置
dim.new_y=0；//初始/新y位置
dim.new_scale=1；//初始/新比例
dim.max_scale=3；//最大图像比例
};
函数变换（）{
变量矩阵=[dim.new_scale，0,0，dim.new_scale，dim.new_x，dim.new_y]。连接（“，”；
image_center.css({
“变换”：“矩阵（“+matrix+”）translate3d（0,0,0）”，
“-webkit转换”：“矩阵（“+matrix+”）translate3d（0,0,0）”，
“-moz变换”：“矩阵（“+matrix+”）translate3d（0,0,0）”，
});
}
$（文档）.ready（函数（）{
resetDim（）；
$（'.outer'）.bind（'mousewheel'，函数（ev）{
//onScroll启动
//确定指针相对于图片的原点
var originX=ev.originalEvent.pageX-原始偏移量。左；
var originY=ev.originalEvent.pageY-原始偏移量.top；
//昂斯克罗尔电动汽车
dim.new_scale+=（ev.OriginaleEvent.deltaY>0）？-0.1:0.1；
如果（尺寸新刻度>尺寸最大刻度）尺寸新刻度=尺寸最大刻度；
否则，如果（尺寸新刻度<1）尺寸新刻度=1；
//基于原点的翻译
dim.new_x=-（originX*（dim.new_scale-1））；
dim.new_y=-（原始*（dim.new_scale-1））；
transform（）；
});
});
一种简单的方法是创建屏幕外对象并将其变换原点居中。将缩放应用于此对象

然后将矩阵变换从屏幕外的元素复制到屏幕上的元素，您应该具有正确的比例

以下是一些复制矩阵的图像原型：

HTMLImageElement.prototype.getMatrix = function() {
    var st = window.getComputedStyle(this, null);
    return st.getPropertyValue("-webkit-transform") ||
        st.getPropertyValue("-moz-transform") ||
        st.getPropertyValue("-ms-transform") ||
        st.getPropertyValue("-o-transform") ||
        st.getPropertyValue("transform") ||
        'none';
};

HTMLImageElement.prototype.setMatrix = function(matrix) {
    this.style.webkitTransform = 
    this.style.msTransform = 
    this.style.MozTransform = 
    this.style.OTransform = 
    this.style.transform = 
         matrix;
  return this;
};

getMatrix
返回矩阵字符串。
setMatrix
获取矩阵字符串

targetImage.setMatrix(sourceImage.getMatrix())

WARE targetImage是显示的图像
而sourceImage是屏幕外图像
请尝试以下操作：

当然，如果滚动太快，过渡将无法保持，但如果滚动太慢，图像将保持锁定在鼠标上

var image_center = $("#image");
var base_image = $(".outer");
var dim = {};

function resetDim() {
  // Initialize image.dim with values
  dim.cont_width = base_image.width(); // Container width
  dim.cont_height = base_image.height(); // Container height
  dim.width = image_center.width(); // Element width
  dim.height = image_center.height(); // Element height

  dim.left_edge = 0;
  dim.top_edge = 0; // Edge translation
  dim.init_x = 0;
  dim.new_x = 0; // Initial/new x position
  dim.init_y = 0;
  dim.new_y = 0; // Initial/new y position
  dim.init_scale = 1;
  dim.new_scale = 1; // Initial/new scale
  dim.max_scale = 3; // Max image scale
};

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)",
  });
}

$(document).ready(function() {
  resetDim();
  transform();

  $('.outer').bind('mousewheel', function(ev) {
    // onScroll start
    // Determine pointer origin in relation to picture
    var offset = image_center.offset();
    var originX = ev.originalEvent.pageX - offset.left;
    var originY = ev.originalEvent.pageY - offset.top;
    // Calculate current size of the image.
    var width = dim.width * dim.new_scale;
    var height = dim.height * dim.new_scale;
        // Calculate the relative position of the mouse independent of current scale.
    var mx = originX / width;
    var my = originY / height;

    // onScroll ev
    dim.new_scale += (ev.originalEvent.deltaY > 0) ? -0.1 : 0.1;
    if (dim.new_scale > dim.max_scale) dim.new_scale = dim.max_scale;
    else if (dim.new_scale < 1) dim.new_scale = 1;

    // Update new image position based upon new scale.
    var new_width = dim.width * dim.new_scale;
    var new_height = dim.height * dim.new_scale;
    var new_mouse_x = new_width * mx;
    var new_mouse_y = new_height * my;
    dim.new_x += originX - new_mouse_x;
    dim.new_y += originY - new_mouse_y;
    transform();
  });
});

var image_center=$（“#image”）；
var base_image=$（“.outer”）；
var dim={}；
函数resetDim（）{
//使用值初始化image.dim
dim.cont_width=base_image.width（）；//容器宽度
dim.cont_height=base_image.height（）；//容器高度
dim.width=image_center.width（）；//元素宽度
dim.height=image_center.height（）；//元素高度
尺寸左边缘=0；
dim.top_edge=0；//边转换
dim.init_x=0；
dim.new_x=0；//初始/新x位置
dim.init_y=0；
dim.new_y=0；//初始/新y位置
dim.init_scale=1；
dim.new_scale=1；//初始/新比例
dim.max_scale=3；//最大图像比例
};
函数变换（）{
变量矩阵=[dim.new_scale，0,0，dim.new_scale，dim.new_x，dim.new_y]。连接（“，”；
image_center.css({
“变换”：“矩阵（“+matrix+”）translate3d（0,0,0）”，
“-webkit转换”：“矩阵（“+matrix+”）translate3d（0,0,0）”，
“-moz变换”：“矩阵（“+matrix+”）translate3d（0,0,0）”，
});
}
$（文档）.ready（函数（）{
resetDim（）；
transform（）；
$（'.outer'）.bind（'mousewheel'，函数（ev）{
//onScroll启动
//确定指针相对于图片的原点
var offset=image_center.offset（）；
var originX=ev.originalEvent.pageX-offset.left；
var originY=ev.originalEvent.pageY-offset.top；
//计算图像的当前大小。
变量宽度=尺寸宽度*尺寸新_刻度；
变量高度=尺寸高度*尺寸新刻度；
//计算鼠标的相对位置，与当前比例无关。
var mx=初始值/宽度；
var my=原始/高度；
//昂斯克罗尔电动汽车
dim.new_scale+=（ev.OriginaleEvent.deltaY>0）？-0.1:0.1；
如果（尺寸新刻度>尺寸最大刻度）尺寸新刻度=尺寸最大刻度；
否则，如果（尺寸新刻度<1）尺寸新刻度=1；
//根据新比例更新新图像位置。
var new_width=dim.width*dim.new_比例；
var新高度=尺寸高度*尺寸新高度刻度；
var new_mouse_x=new_width*mx；
var new_mouse_y=新高度*我的；
dim.new_x+=originX-new_mouse_x；
dim.new_y+=原始-新建鼠标；
transform（）；
});
});
您想做什么？JSFIDLE似乎在某些方面起作用。我不明白到底是什么不起作用？我更新了这个问题（希望）使我的问题更清楚。