矩阵缩放/从点平移
Matrix scale/translate from point
本文关键字:缩放 更新时间:2023-09-26
我正在尝试缩放图像,并使其从原点正确平移(基本上是缩放)。我正试图找到一个不涉及更改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
一种简单的方法是创建一个屏幕外对象并将其变换原点居中。将缩放应用于该对象。
然后将矩阵变换从屏幕外元素复制到屏幕上元素,您应该有正确的比例。
以下是一些复制矩阵的图像原型:
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())
was targetImage是显示的图像sourceImage是屏幕外图像
我得到了一个部分解。我认为它可以随心所欲,放大和缩小鼠标指定的点。不幸的是,如果你缩放,然后将鼠标移动到另一个点,然后再次缩放,它会跳来跳去。
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();
});
});
试试这个: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();
});
});
相关文章:
- 更改高贴图的缩放级别
- 在不阻止默认行为的情况下检测IE10中的缩放
- 单击超链接时,如何使用Google Maps API v3缩放地图
- 缩放Raphael/SVG容器以适应所有内容
- 传单缩放控制位置错误
- 在不移动内部文本的情况下缩放元素的效果
- 调整缩放窗口高度提升缩放
- 计算CSS3缩放框在另一个框中的最高位置
- D3.JS向rect添加缩放和列表项
- 当我在节点上拖动鼠标时,我如何防止使用d3.ehavior.zoom().on(“缩放”,重绘)
- 将直流图表库中的折线图缩放限制为小时
- 为什么缩放按钮不会显示在照片擦除中
- 动态设置谷歌地图缩放
- 如何缩放像图像一样的元素
- 使用KineticJS变换(移动/缩放/旋转)形状
- 在手机上缩小/缩放滚动图像
- 将时间缩放添加到折线图(Chart.js)
- 当涉及css缩放时,如何获得页面上的点击位置
- 如何缩放地图框传单中的标记单击事件
- 自动缩放图像以匹配文本高度