我有一个包含在框中的可拖动图像。您可以放大和缩小框中的图像,这将使图像变大或变小,但框大小保持不变。该框的高度和宽度将随着浏览器大小的调整而变化。图像的顶部和左侧值将在拖动时发生变化。
我试图将框在图像中居中的任何点保留在中心。有点像 Google 地图上的缩放功能或 Mac OS X 上的缩放功能。
我现在正在做的是计算框的中心(x = w/2,y = h/2),然后使用图像的顶部和左侧值来计算图像在框中心的位置盒子。 (x -= 左,y -= 顶部)。
然后,我通过放大或缩小图像来缩放图像,并使用比例变化来调整坐标(x = (x * (old_width/new_width), y = (y * (old_height/new_height)))。
然后,我重新定位图像,使其中心与缩放前相同,方法是获取当前居中的坐标(随调整大小而变化),并将旧中心值和新值之间的差异添加到顶部和左侧值(new_left = post_zoom_left + (old_center_x - new_center_x), new_top = post_zoom_top + (old_center_y - new_center_y)。
这对于放大来说效果很好,但是缩小似乎有点不对劲。
有什么建议么?
我的代码如下:
app.Puzzle_Viewer.prototype.set_view_dimensions = function () {
var width, height, new_width, new_height, coordinates, x_scale,
y_scale;
coordinates = this.get_center_position();
width = +this.container.width();
height = +this.container.height();
//code to figure out new width and height
//snip ...
x_scale = width/new_width;
y_scale = height/new_height;
coordinates.x = Math.round(coordinates.x * x_scale);
coordinates.y = Math.round(coordinates.y * y_scale);
//resize image to new_width & new_height
this.center_on_position(coordinates);
};
app.Puzzle_Viewer.prototype.get_center_position = function () {
var top, left, bottom, right, x, y, container;
right = +this.node.width();
bottom = +this.node.height();
x = Math.round(right/2);
y = Math.round(bottom/2);
container = this.container.get(0);
left = container.style.left;
top = container.style.top;
left = left ? parseInt(left, 10) : 0;
top = top ? parseInt(top, 10) : 0;
x -= left;
y -= top;
return {x: x, y: y, left: left, top: top};
};
app.Puzzle_Viewer.prototype.center_on_position = function (coordinates) {
var current_center, x, y, container;
current_center = this.get_center_position();
x = current_center.left + coordinates.x - current_center.x;
y = current_center.top + coordinates.y - current_center.y;
container = this.container.get(0);
container.style.left = x + "px";
container.style.top = y + "px";
};