Question

我正在尝试缩放图像并使其从原点正确转换（基本上是缩放到缩放）。我正在尝试找到一个不涉及更改transform-origin的解决方案，因为它会使找到图片的左/上边缘变得复杂，我正在使用的不仅仅是这个问题。

这更像是一个数学问题。 我无法根据原点确定一个等式来确定翻译图像的数量。我得出的当前公式并没有正确地从一个点扩展。关于演示，当用鼠标滚动时，图像应该从鼠标指针炸掉。

我不是在寻找解决方法或替代设计。如前所述，我无法修改transform-origin属性。

矩阵变换功能

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

一种简单的方法是创建一个离屏对象并将其转换为变换原点。将缩放应用于此对象。

然后将矩阵变换从离屏元素复制到屏幕元素，你应该有正确的比例。

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

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

是targetImage是显示的图像和sourceImage是屏幕外图像

Answer 2

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

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

Answer 3

试试这个：https://jsfiddle.net/6c585qom/2/

当然，如果您滚动得太快，则转换不会跟上，但如果您慢慢滚动，图像会保持锁定到鼠标。

$string = '{[John][16 years old][New York]}{[Michael][22 years old][Las Vegas]}{[Smith][32 years old][Chicago]}';

$cleaned = trim(str_replace(['][', ']}{['],', ', $string), "{}[]");
$array = [$cleaned];

矩阵比例/从点转换

3 个答案: