javascript - 矩阵缩放/从点平移

Question

我正在尝试缩放图像并使其从原点正确平移(基本上是捏合缩放)。我正在尝试找到一个不涉及更改 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

Answer 1

一个简单的方法是创建一个屏幕外的对象并将它的变换原点居中。将缩放应用于此对象。

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

下面是复制矩阵的一些图像原型(prototype):

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())

were targetImage是显示的图片 sourceImage 是离屏图像