javascript – 如何有效地计算缩放比例？

2019-06-10 14:24:09 阅读：250 来源： 互联网

标签：jquery javascript math geometry zoom

我有一个可拖动的图像包含在一个盒子里.您可以放大和缩小框中的图像,这将使图像变大或变小,但框大小保持不变.随着浏览器调整大小,框的高度和宽度会有所不同.图像的顶部和左侧值会随着拖动而改变.

我试图保持盒子在图像中心的中心位置.有点像放大谷歌地图的工作原理或放大Mac OS X缩放.

我现在正在做的是计算框的中心(x = w / 2,y = h / 2),然后使用图像的顶部和左侧值来计算图像在中心的位置.框. (x – = left,y – = top).

然后我通过增大或缩小图像来缩放图像,我使用比例变化来调整坐标(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";
};

解决方法:

[Working demo]

数据

>调整大小：R
>帆布尺寸：Cw,Ch
>调整后的图像尺寸：Iw,嗯
>调整后的图像位置：Ix,Iy
>点击画布上的位置：Pcx,Pcy
>点击原始图片上的位置：Pox,Poy
>单击调整大小后图像上的位置：Prx,Pry

方法

>在画布上单击事件位置 – >图像上的位置：Pox = Pcx – Ix,Poy = Pcy – Iy
>图像上的位置 – >调整大小后的图像：Prx = Pox * R,Pry = Poy * R.
> top =(Ch / 2) – Pry,left =(Cw / 2) – Prx
> ctx.drawImage(img,left,top,img.width,img.height)

履行

// resize image
I.w *= R;
I.h *= R;

// canvas pos -> image pos
Po.x = Pc.x - I.left;
Po.y = Pc.y - I.top;

// old img pos -> resized img pos
Pr.x = Po.x * R;
Pr.y = Po.y * R;

// center the point
I.left = (C.w / 2) - Pr.x;
I.top  = (C.h / 2) - Pr.y;

// draw image
ctx.drawImage(img, I.left, I.top, I.w, I.h);

这是一个适用于放大或缩小的通用公式,可以处理任何点作为新中心.要使其特定于您的问题：

> Pcx = Cw / 2,Pcy = Ch / 2(总是使用中心)
> R< 1用于缩小,并且R> 1. 1用于放大

标签：jquery,javascript,math,geometry,zoom
来源： https://codeday.me/bug/20190610/1212432.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – 如何有效地计算缩放比例？