矩陣縮放/從點

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

一個簡單的方法是創建一個屏幕外的對象，並將它作爲變換原點的中心。將縮放應用於此對象。

然後將矩陣轉換從屏幕外的元素複製到屏幕上的元素，您應該有正確的比例。

這裏有一些圖像原型到矩陣複製：

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/

當然，如果您滾動太快，過渡不守但如果您緩慢滾動，圖像將保持鎖定在鼠標上。

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