翻譯我試圖縮放圖像,並從原點(基本上捏到放大)正確翻譯。我試圖找到一個不涉及更改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
你想做什麼? JSFiddle似乎在某些方面起作用。 –
我不明白究竟是什麼,它不工作? –
我更新了問題(希望)使我的問題更清楚。 – dook